Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。可以理解為項(xiàng)目的全局變量，使數(shù)據(jù)在各組件內(nèi)共享。

Vuex狀態(tài)管理圖例

修改state數(shù)據(jù)必須經(jīng)過Mutations

Vuex的基本使用步驟

1.提取出一個(gè)公共的store對(duì)象，用于保存在多個(gè)組件中共享的狀態(tài)

2.將store對(duì)象放置在new Vue對(duì)象中，這樣可以保證在所有的組件中都可以使用到

3.在其他組件中使用store對(duì)象中保存的狀態(tài)即可

通過this.$store.state.屬性的方式來訪問狀態(tài)

通過this.$store.commit('mutation中方法')來修改狀態(tài)

組件內(nèi)的函數(shù)

mutation中的方法

注意事項(xiàng)：

我們通過提交mutation的方式，而非直接改變store.state.count。

這是因?yàn)閂uex可以更明確的追蹤狀態(tài)的變化，所以不要直接改變store.state.count的值。

Getter

可以理解為state的計(jì)算屬性。

創(chuàng)建方法：