腳本之家服務器常用軟件

快捷導航

Vue替代vuex的存儲庫Pinia詳細介紹

更新時間：2022年09月16日 09:34:03 作者：super_wanan

這篇文章主要介紹了Vue替代vuex的存儲庫Pinia，聽說pinia與vue3更配,便開啟了vue3的學習之路，pinia 和 vuex 具有相同的功效，是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)

前言

vue3已經(jīng)發(fā)布很長一段時間了，vue官網(wǎng)也已經(jīng)默認訪問vue3的文檔了。因此打算系系統(tǒng)統(tǒng)仔仔細細的學習一波

使用官方提供的腳手架工具新建一個vue3項目會發(fā)現(xiàn)，官方已將pinia作為默認的狀態(tài)存儲庫提供在安裝選項中了。

vuex的倉庫中官方也有這么一段提示：

大致是說：Pinia 現(xiàn)在是新的默認設(shè)置。Vue 的官方狀態(tài)管理庫已更改為Pinia。您可以簡單地將 Pinia 視為具有不同名稱的 Vuex 5。Pinia 也適用于 Vue 2.x。Vuex 3 和 4 仍將被維護。但是，不太可能為其添加新功能。如果您打算開始一個新項目，我們強烈建議您使用 Pinia。

本文就來介紹打敗vuex的新一代vue存儲庫Pinia究竟有和神奇魔法~

Pinia介紹

u1s1，logo真可愛~

Pinia（發(fā)音為 /pi?nj?/，類似于英語中的“peenya”）是最接近有效包名 piña（西班牙語中的_pineapple_）的詞。菠蘿實際上是一組單獨的花朵，它們結(jié)合在一起形成多個水果。與 Store 類似，每一家都是獨立誕生的，但最終都是相互聯(lián)系的。它也是一種美味的熱帶水果，原產(chǎn)于南美洲。

1. 創(chuàng)建一個Pinia store

安裝pinia

npm install pinia

注意雖然pinia支持vue2.x和vue3.x，但是如果你的vue的版本低于2.7，還需要安裝組合API：@vue/composition-api。

2. 創(chuàng)建一個根存儲并傳遞給應用程序

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

如果你使用的是vue2，還需要安裝一個插件并將創(chuàng)建的pinia注入應用程序的根目錄

import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
  el: '#app',
  // 其他選項...
  // ...
  // 注意同一個 `pinia` 實例可以在多個 Vue 應用程序中使用
  // 同一個頁面
  pinia,
})

3. 定義一個store

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
      msg: '開心',
      todoList: ['吃飯', '繪畫']
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  actions: {
    increment(payload?: number) {
      this.count = payload ? this.count + payload : this.count + 1
    }
  }
})

2. 訪問State

  <template>
	<div class="about">
		<p>{{ counterStore.msg }}</p>
	    <p>{{ counterStore.count }}</p>
	    <p>{{ counterStore.doubleCount }}</p>
	    <p @click="() =>counterStore.increment(3)">點擊我+1</p>
  </div>
  </template>
  <script setup lang="ts">
	  import { storeToRefs } from 'pinia'
	  import { useCounterStore } from '@/stores/counter'
	  const counterStore = useCounterStore()
  </script>

你也可以使用storeToRefs進行解構(gòu)

<template>
  <div class="about">
    <p>{{ count }}</p>
    <p>{{ msg }}</p>
    <p>{{ doubleCount }}</p>
    <ul>
      <li v-for="(item, index) in todoList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script setup lang="ts">
  import { storeToRefs } from 'pinia'
  import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  // 也可以使用storeToRefs進行解構(gòu)
  let { count, doubleCount, msg, todoList } = storeToRefs(counterStore)
</script>

3. Pinia修改數(shù)據(jù)的四種方法

直接修改

counterStore.count++

$patch

$patch 方法允許你使用部分“state”對象同時應用多個更改。但是，使用這種語法應用某些突變非常困難或代價高昂：任何集合修改（例如，從數(shù)組中推送、刪除、拼接元素）都需要創(chuàng)建一個新集合。

const newTodoList = [...counterStore.todoList, '睡午覺']
counterStore.$patch({
	 count: 100,
	 msg: '哈哈',
	 todoList: newTodoList
})

$patch傳遞函數(shù)

$patch 方法也接受一個函數(shù)來批量修改集合內(nèi)部分對象的情況

counterStore.$patch((state) => {
    state.count = 100,
    state.msg = '哈哈',
    state.todoList.push('聽音樂')
})

action

當業(yè)務邏輯很復雜的時候，可以將方法寫在store中的action里

actions: {
    increment(payload?: number) {
      this.count = payload ? this.count + payload : this.count + 1
    }
}

4. 重置State

可以通過調(diào)用 store 上的 $reset() 方法將狀態(tài) 重置到其初始值

counterStore.$reset()

5. 替換state

通過將其 $state 屬性設(shè)置為新對象來替換 Store 的整個狀態(tài)

counterStore.$state = {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> counter: 666, msg: 'Paimon', todoList: [] }

也可以通過更改 pinia 實例的 state 來替換應用程序的整個狀態(tài)。這在 SSR for hydration 期間使用。

pinia.state.value = {}

6. 訂閱狀態(tài)

可以通過 store 的 $subscribe() 方法查看狀態(tài)及其變化，類似于 Vuex 的 subscribe 方法。與常規(guī)的 watch() 相比，使用 $subscribe() 的優(yōu)點是 subscriptions 只會在 patches 之后觸發(fā)一次。

counterStore.$subscribe((mutation, state) => {
  // 每當它發(fā)生變化時，將整個狀態(tài)持久化到本地存儲
  localStorage.setItem('cart', JSON.stringify(state))
})

7. Getters

Getter 完全等同于 Store 狀態(tài)的計算值。它們可以用 defineStore() 中的 getters 屬性定義。他們接收“狀態(tài)”作為第一個參數(shù)以鼓勵箭頭函數(shù)的使用。

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
      msg: '開心',
      todoList: ['吃飯', '繪畫']
    }
  },
  getters: {
  //自動將返回類型推斷為數(shù)字
    doubleCount(state) {
      return state.count * 2
    }
  }
})

在getters中使用其他 getter：

getters: {
	// 返回類型必須明確設(shè)置
    doublePlusOne():number {
      return this.doubleCount + 1
    }
  }

將參數(shù)傳遞給 getter:

getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  }

在組件中這樣使用：

<template>
  <p>User 2: {{ counterStore.getUserById(2) }}</p>
</template>

與vuex比較

Pinia 最初是為了探索 Vuex 的下一次迭代會是什么樣子，結(jié)合了 Vuex 5 核心團隊討論中的許多想法。最終，團隊意識到 Pinia 已經(jīng)實現(xiàn)了他們在 Vuex 5 中想要的大部分內(nèi)容，并決定實現(xiàn)它。與 Vuex 相比，Pinia 提供了一個更簡單的 API，具有更少的規(guī)范，提供了 Composition-API 風格的 API，最重要的是，在與 TypeScript 一起使用時具有可靠的類型推斷支持。

mutations 不再存在。他們經(jīng)常被認為是非常冗長。他們最初帶來了 devtools 集成，但這不再是問題。
無需創(chuàng)建自定義復雜包裝器來支持 TypeScript，所有內(nèi)容都是類型化的，并且 API 的設(shè)計方式盡可能利用 TS 類型推斷。
不再需要注入、導入函數(shù)、調(diào)用函數(shù)、享受自動完成功能
無需動態(tài)添加 Store，默認情況下它們都是動態(tài)的，您甚至都不會注意到。請注意，您仍然可以隨時手動使用 Store 進行注冊，但因為它是自動的，您無需擔心
不再有 modules 的嵌套結(jié)構(gòu)。您仍然可以通過在另一個 Store 中導入和使用來隱式嵌套 Store，但 Pinia 通過設(shè)計提供平面結(jié)構(gòu)，同時仍然支持 Store 之間的交叉組合方式。您甚至可以擁有 Store 的循環(huán)依賴關(guān)系。
沒有命名空間模塊。鑒于 Store 的扁平架構(gòu)，“命名空間” Store 是其定義方式所固有的，您可以說所有 Store 都是命名空間的。