自從我開始使用Vue 3和組合API以來，我也嘗試使用 Pinea 作為狀態(tài)管理庫。如果是從是 vue2 和  vuex 過來的，就會(huì)覺得用起來差別還是很大的。

說實(shí)話，我對(duì) Vuex 使用還是很不適應(yīng)。最初，有 "很多 "的模板代碼，只是讓 store 使用減少。不過，狀態(tài)管理確實(shí)給我們帶來了遍歷，特別是每當(dāng)我們有一小塊應(yīng)該跨組件共享的狀態(tài)時(shí)，就會(huì)更傾向于使用它。

我們先來看看 Vuex 和 Pinia 的整體設(shè)計(jì)以及它們之間的區(qū)別是什么。

Vuex

下面是Vuex工作原理的官方圖示，剛開始學(xué)習(xí)時(shí)，一看就很懵，不過當(dāng)用過時(shí)開發(fā)過項(xiàng)目時(shí)，一看就就能懂了。

在 Vuex  store（倉庫）中，有4個(gè)主要組件。

1、State

這只是一個(gè)包含實(shí)際狀態(tài)的對(duì)象。我們可以在開發(fā)工具中看到這個(gè)狀態(tài)，如果想保留這個(gè)狀態(tài)用于緩存或其他目的，也可以保存這個(gè)對(duì)象。

2、Actions

Actions 是執(zhí)行異步任務(wù)的函數(shù)。它們是由關(guān)鍵字dispatch發(fā)起的。

Actions 通常會(huì)請(qǐng)求一個(gè)外部 API 或做一些其他的異步工作。它還負(fù)責(zé)調(diào)用適當(dāng)?shù)?nbsp;mutation 來實(shí)際改變狀態(tài)。這說明 actions 本身并沒有改變狀態(tài)，而是 commit  變化，讓 mutation  來改變狀態(tài)。

3、Mutations

Mutation 是唯一會(huì)真正同步改變狀態(tài)的函數(shù)。Mutations 使用關(guān)鍵字commit。

4、Getters

Getters可以被認(rèn)為是計(jì)算過的屬性，應(yīng)該被用來從狀態(tài)中獲得一個(gè)修改過的響應(yīng)。

一個(gè)簡單的Vuex store 的例子如下所示：

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

使用 store

在處理上述問題時(shí)，一個(gè)組件通常會(huì)調(diào)用dispatch?來啟動(dòng)異步任務(wù)（比如從外部API中獲?。?。如果需要改變狀態(tài)，比如一個(gè)簡單的計(jì)數(shù)器，可以調(diào)用 commit。

這意味著一個(gè)組件可以通過調(diào)用dispatch?或commit?來與 store  進(jìn)行交互。我不知道你怎么想，但對(duì)我來說，這增加了一些心智負(fù)擔(dān)，而我真的不需要。

在使用Vuex之前，我對(duì) "commit" 和 "dispatch" 這兩個(gè)術(shù)語并不熟悉。由于這個(gè)原因，用它們來改變狀態(tài)對(duì)我來說并不直觀。對(duì)于一些人來說，這可能是不同的，但這讓我覺得使用 action?  或 mutation 都有點(diǎn)不舒服。

另外值得注意的是，使用Vuex，一個(gè)組件可以訪問整個(gè) store，盡管在邏輯上將 Vuex store 分成不同的文件。

Pinia

與Vuex相比，Pinia的工作原理圖如下：

整體架構(gòu)比 Vuex 更簡單，更容易理解。一個(gè)Pinia store 有3個(gè)主要組成部分:

1、State

與Vuex的定義一樣。

2、Actions

這里的 Actions  與Vuex中的 Actions  和 mutations  的工作相同。這些函數(shù)是改變狀態(tài)的唯一方式。如果想從外部API獲取數(shù)據(jù)并更新狀態(tài)，也可以使用 actions 。

與Vuex設(shè)置的另一個(gè)區(qū)別是，Pinia actions 是普通函數(shù)，心智負(fù)擔(dān)比 vuex 小很多。

3、Getters

getter 完全等同于 Store 狀態(tài)的計(jì)算屬性。

一個(gè)簡單的Pinia   store 的例子如下所示：

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    }
  },
})

使用

如果有多個(gè)模板， Vuex 一般采用 modules 方式，這就需要在 store/index.ts中將所有的 modules通過 creaeStore 注冊(cè)到 store 中，那么Pinia 就省去了這些麻煩，createPinia() 即可，不需要注冊(cè) modules，沒有任何參數(shù)，所以連 store/index.ts都可以不用了，直接在main.ts 中添加即可， 這一點(diǎn)會(huì)比Vuex簡潔很多。

import { createPinia } from 'pinia'
app.use(createPinia())；
# main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())

app.mount('#app')

總結(jié)

就目前而言，我想說Pinia更容易理解和使用。也許有一些東西可以讓Vuex在更大的項(xiàng)目中更好地?cái)U(kuò)展，但我還沒有遇到過這種情況。

對(duì)我來說，另一件重要的事情是，我們可以用正常的參數(shù)調(diào)用 actions 的正常方法。

Pinia還支持Vue 2和3的開箱即用，這使得遷移變得更加容易。

優(yōu)勢

最后也在總結(jié)一下 Pinia 優(yōu)勢：

• Vue2 和 Vue3 都支持。
• 更小，只有1KB。
• 不需要嵌套模塊，符合Vue3的Composition api，讓代碼更加扁平化。
• 拋棄了Mutations的操作，只有state、getters和actions.極大簡化了狀態(tài)管理庫的使用完整的TypeScript支持。
• 代碼更加簡潔，可以實(shí)現(xiàn)很好的代碼自動(dòng)分割。