Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式沐旨。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)森逮,并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。簡單的來說磁携,就是數(shù)據(jù)共用褒侧,對數(shù)據(jù)集中起來進行統(tǒng)一的管理
核心概念主要有這些:
State
Vuex 使用單一狀態(tài)樹——是的,用一個對象就包含了全部的應(yīng)用層級狀態(tài),將所需要的數(shù)據(jù)寫放這里闷供,類似于data烟央。
Getter
有時候我們需要從 store 中的 state 中派生出一些狀態(tài),使用Getter这吻,類似于computed吊档。
Mutation
更改 Vuex 的 store 中的狀態(tài)的唯一方法,類似methods唾糯。
Action
Action 提交的是 mutation怠硼,而不是直接變更狀態(tài),可以包含任意異步操作移怯,這里主要是操作異步操作的香璃,使用起來幾乎和mutations方法一模一樣,類似methods。
Module
當(dāng)應(yīng)用變得非常復(fù)雜時舟误,store 對象就有可能變得相當(dāng)臃腫葡秒。Vuex 允許我們將 store 分割成模塊(module)。每個模塊擁有自己的 state嵌溢、mutation眯牧、action、getter赖草、甚至是嵌套子模塊学少。
vuex中mutation為什么是同步?
原因: 使用devtools調(diào)試的時候會有問題秧骑。
一條重要的原則就是要記住 mutation 必須是同步函數(shù)版确。為什么?請參考下面的例子:
mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
現(xiàn)在想象乎折,我們正在 debug 一個 app 并且觀察 devtool 中的 mutation 日志绒疗。每一條 mutation 被記錄,devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照骂澄。然而吓蘑,在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成:因為當(dāng) mutation 觸發(fā)的時候,回調(diào)函數(shù)還沒有被調(diào)用坟冲,devtools 不知道什么時候回調(diào)函數(shù)實際上被調(diào)用——實質(zhì)上任何在回調(diào)函數(shù)中進行的狀態(tài)的改變都是不可追蹤的士修。
摘自vuex官網(wǎng):
https://vuex.vuejs.org/zh/guide/mutations.html