什么是Vuex ？
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。
什么情況下使用Vuex
一般情況下，我們需要根據(jù)項(xiàng)目的實(shí)際大小來決定是否需要引入Vuex，如果相對需要存儲的內(nèi)容不是特別多的時候，那么我們也可以通過本地存儲進(jìn)行完成一些數(shù)據(jù)的存儲以及操作。因?yàn)閷τ谔唵蔚捻?xiàng)目來說，使用 Vuex 可能是繁瑣冗余的。
示例：
我們來看一下官網(wǎng)上的一段代碼，內(nèi)容如下所示：
new Vue({
// state數(shù)據(jù)源
data () {
return {
count: 0
}
},
// view視圖
template: `
<div>{{ count }}</div>
`,
// actions事件
methods: {
increment () {
this.count++
}
}
})
這是一個很簡單的增長型計(jì)數(shù)功能頁面，通過事件 increment，實(shí)現(xiàn) count的增長，然后渲染到界面上去。
這個狀態(tài)自管理應(yīng)用包含以下幾個部分：
state：驅(qū)動應(yīng)用的數(shù)據(jù)源。view：以聲明方式將state映射到視圖。actions：響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化，然后去影響state。
下圖是一種”單向數(shù)據(jù)流“的理念：
這個理念的缺點(diǎn)是，當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時，單向數(shù)據(jù)流的簡潔性很容易被破壞，如：
多個視圖依賴于同一狀態(tài)。傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。
來自不同視圖的行為需要變更同一狀態(tài)。我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導(dǎo)致無法維護(hù)的代碼。
因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構(gòu)成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！
通過定義和隔離狀態(tài)管理中的各種概念并通過強(qiáng)制規(guī)則維持視圖和狀態(tài)間的獨(dú)立性，我們的代碼將會變得更結(jié)構(gòu)化且易維護(hù)。
Vuex的五個核心概念
Vuex有五個核心概念，分別是state、 getters、 mutations、 actions、 modules。
state：Vuex的基本數(shù)據(jù)，用來存儲變量。getters：從基本數(shù)據(jù)state派生的數(shù)據(jù)，相當(dāng)于state的計(jì)算屬性。mutation：提交更新數(shù)據(jù)的方法，必須是同步的，如果需要異步使用action。每個mutation都有一個字符串的事件類型和一個回調(diào)函數(shù)handler。action：和mutation的功能大致相同，不同之處在于action提交的是mutation，而不是直接變更狀態(tài)。action可以包含任意異步操作。modules：模塊化Vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters，使得結(jié)構(gòu)非常清晰，方便管理。
