建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
自從我開(kāi)始使用Vue 3和組合API以來(lái)，我也嘗試使用 Pinea 作為狀態(tài)管理庫(kù)。如果是從是 vue2 和 vuex 過(guò)來(lái)的，就會(huì)覺(jué)得用起來(lái)差別還是很大的。
說(shuō)實(shí)話，我對(duì) Vuex 使用還是很不適應(yīng)。最初，有 "很多 "的模板代碼，只是讓 store 使用減少。不過(guò)，狀態(tài)管理確實(shí)給我們帶來(lái)了遍歷，特別是每當(dāng)我們有一小塊應(yīng)該跨組件共享的狀態(tài)時(shí)，就會(huì)更傾向于使用它。
我們先來(lái)看看 Vuex 和 Pinia 的整體設(shè)計(jì)以及它們之間的區(qū)別是什么。
Vuex
下面是Vuex工作原理的官方圖示，剛開(kāi)始學(xué)習(xí)時(shí)，一看就很懵，不過(guò)當(dāng)用過(guò)時(shí)開(kāi)發(fā)過(guò)項(xiàng)目時(shí)，一看就就能懂了。
在 Vuex store（倉(cāng)庫(kù)）中，有4個(gè)主要組件。
1、State
這只是一個(gè)包含實(shí)際狀態(tài)的對(duì)象。我們可以在開(kāi)發(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 來(lái)實(shí)際改變狀態(tài)。這說(shuō)明 actions 本身并沒(méi)有改變狀態(tài)，而是 commit 變化，讓 mutation 來(lái)改變狀態(tài)。
3、Mutations
Mutation 是唯一會(huì)真正同步改變狀態(tài)的函數(shù)。Mutations 使用關(guān)鍵字commit。
4、Getters
Getters可以被認(rèn)為是計(jì)算過(guò)的屬性，應(yīng)該被用來(lái)從狀態(tài)中獲得一個(gè)修改過(guò)的響應(yīng)。
一個(gè)簡(jiǎn)單的Vuex store 的例子如下所示：
const store = createStore({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})使用 store
在處理上述問(wèn)題時(shí)，一個(gè)組件通常會(huì)調(diào)用dispatch?來(lái)啟動(dòng)異步任務(wù)（比如從外部API中獲?。?。如果需要改變狀態(tài)，比如一個(gè)簡(jiǎn)單的計(jì)數(shù)器，可以調(diào)用 commit。
這意味著一個(gè)組件可以通過(guò)調(diào)用dispatch?或commit?來(lái)與 store 進(jìn)行交互。我不知道你怎么想，但對(duì)我來(lái)說(shuō)，這增加了一些心智負(fù)擔(dān)，而我真的不需要。
在使用Vuex之前，我對(duì) "commit" 和 "dispatch" 這兩個(gè)術(shù)語(yǔ)并不熟悉。由于這個(gè)原因，用它們來(lái)改變狀態(tài)對(duì)我來(lái)說(shuō)并不直觀。對(duì)于一些人來(lái)說(shuō)，這可能是不同的，但這讓我覺(jué)得使用 action? 或 mutation 都有點(diǎn)不舒服。
另外值得注意的是，使用Vuex，一個(gè)組件可以訪問(wèn)整個(gè) store，盡管在邏輯上將 Vuex store 分成不同的文件。
Pinia
與Vuex相比，Pinia的工作原理圖如下：
整體架構(gòu)比 Vuex 更簡(jiǎn)單，更容易理解。一個(gè)Pinia store 有3個(gè)主要組成部分:
1、State
與Vuex的定義一樣。
2、Actions
這里的 Actions 與Vuex中的 Actions 和 mutations 的工作相同。這些函數(shù)是改變狀態(tài)的唯一方式。如果想從外部API獲取數(shù)據(jù)并更新?tīng)顟B(tài)，也可以使用 actions 。
與Vuex設(shè)置的另一個(gè)區(qū)別是，Pinia actions 是普通函數(shù)，心智負(fù)擔(dān)比 vuex 小很多。
3、Getters
getter 完全等同于 Store 狀態(tài)的計(jì)算屬性。
一個(gè)簡(jiǎn)單的Pinia store 的例子如下所示：
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
actions: {
increment() {
this.counter++
}
},
})使用
如果有多個(gè)模板， Vuex 一般采用 modules 方式，這就需要在 store/index.ts中將所有的 modules通過(guò) creaeStore 注冊(cè)到 store 中，那么Pinia 就省去了這些麻煩，createPinia() 即可，不需要注冊(cè) modules，沒(méi)有任何參數(shù)，所以連 store/index.ts都可以不用了，直接在main.ts 中添加即可， 這一點(diǎn)會(huì)比Vuex簡(jiǎn)潔很多。
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é)
就目前而言，我想說(shuō)Pinia更容易理解和使用。也許有一些東西可以讓Vuex在更大的項(xiàng)目中更好地?cái)U(kuò)展，但我還沒(méi)有遇到過(guò)這種情況。
對(duì)我來(lái)說(shuō)，另一件重要的事情是，我們可以用正常的參數(shù)調(diào)用 actions 的正常方法。
Pinia還支持Vue 2和3的開(kāi)箱即用，這使得遷移變得更加容易。
優(yōu)勢(shì)
最后也在總結(jié)一下 Pinia 優(yōu)勢(shì)：
- Vue2 和 Vue3 都支持。
- 更小，只有1KB。
- 不需要嵌套模塊，符合Vue3的Composition api，讓代碼更加扁平化。
- 拋棄了Mutations的操作，只有state、getters和actions.極大簡(jiǎn)化了狀態(tài)管理庫(kù)的使用完整的TypeScript支持。
- 代碼更加簡(jiǎn)潔，可以實(shí)現(xiàn)很好的代碼自動(dòng)分割。
當(dāng)前標(biāo)題：測(cè)試一下Pinia，Vuex 要出局了？
網(wǎng)頁(yè)地址：http://m.fisionsoft.com.cn/article/dhshgcp.html
