在Vue生態(tài)系統(tǒng)中，Vuex是一個非常流行的狀態(tài)管理庫。它能夠幫助開發(fā)人員輕松管理Vue應(yīng)用程序中的所有狀態(tài)，包括全局狀態(tài)、組件的本地狀態(tài)和跨越多個組件的狀態(tài)。

Vuex有以下幾個核心概念：

State

State是在應(yīng)用程序中存儲數(shù)據(jù)的地方。它是一個JavaScript對象，這個對象包含我們需要管理的所有狀態(tài)。

const store = new Vuex.Store({
state: {
count: 0
}
})

Getter

Getter的作用是從state中獲取數(shù)據(jù)并對其進(jìn)行操作。

const store = new Vuex.Store({
state: {
count: 0
},
getters: {
getCount: state =>{
return state.count + 1
}
}
})

Mutation

Mutation是用來修改state中的數(shù)據(jù)。通過Mutation，我們可以保證狀態(tài)的變更只在Vuex的Devtools中可以被跟蹤。

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})

Action

Action是用來處理異步操作的。相較于Mutation，Action可以提交Mutation，也可以調(diào)用異步API并通過Mutation來更新狀態(tài)。

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() =>{
commit('increment')
}, 1000)
}
}
})

Module

當(dāng)應(yīng)用程序變得越來越大并且狀態(tài)變得愈發(fā)復(fù)雜時，我們需要將狀態(tài)劃分為多個模塊。Module可以使得我們在單個文件中進(jìn)行狀態(tài)管理從而使得我們的代碼更加整潔和易于維護(hù)。

const counter = {
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() =>{
commit('increment')
}, 1000)
}
}
}
const store = new Vuex.Store({
modules: {
counter
}
})

最后，需要特別注意的是，當(dāng)我們使用Vuex時，必須要嚴(yán)格遵循它的規(guī)則。 在一個組件中，只能從Mutation中來更新狀態(tài)，而不能從Action或Getter中來更新狀態(tài)。