Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
什麼是“狀態管理模式”？
讓我們從一個簡單的 Vue 計數應用開始：
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
這個狀態自管理應用包含以下幾個部分：
- state，驅動應用的數據源；
- view，以聲明方式將 state 映射到視圖；
- actions，響應在 view 上的用戶輸入導致的狀態變化。
以下是一個表示“單向數據流”理念的簡單示意：
但是，當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：
- 多個視圖依賴於同一狀態。
- 來自不同視圖的行爲需要變更同一狀態。
對於問題一，傳參的方法對於多層嵌套的組件將會非常繁瑣，並且對於兄弟組件間的狀態傳遞無能爲力。對於問題二，我們經常會採用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。
因此，我們爲什麼不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行爲！
通過定義和隔離狀態管理中的各種概念並通過強制規則維持視圖和狀態間的獨立性，我們的代碼將會變得更結構化且易維護。
這就是 Vuex 背後的基本思想，借鑑了 Flux、Redux 和 The Elm Architecture。與其他模式不同的是，Vuex 是專門爲 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。
如果你想交互式地學習 Vuex，可以看這個 Scrimba 上的 Vuex 課程，它將錄屏和代碼試驗場混合在了一起，你可以隨時暫停並嘗試。
#什麼情況下我應該使用 Vuex？
Vuex 可以幫助我們管理共享狀態，並附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是，如果您需要構建一箇中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說就是：
Flux 架構就像眼鏡：您自會知道什麼時候需要它。
每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有以下兩點不同：
-
Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地得到高效更新。
-
你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。
#最簡單的 Store
提示： 我們將在後續的文檔示例代碼中使用 ES2015 語法。如果你還沒能掌握 ES2015，你得抓緊了！
安裝 Vuex 之後，讓我們來創建一個 store。創建過程直截了當——僅需要提供一個初始 state 對象和一些 mutation：
// 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
現在，你可以通過 store.state 來獲取狀態對象，以及通過 store.commit 方法觸發狀態變更：
store.commit('increment')
console.log(store.state.count) // -> 1
再次強調，我們通過提交 mutation 的方式，而非直接改變 store.state.count，是因爲我們想要更明確地追蹤到狀態的變化。這個簡單的約定能夠讓你的意圖更加明顯，這樣你在閱讀代碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也讓我們有機會去實現一些能記錄每次狀態改變，保存狀態快照的調試工具。有了它，我們甚至可以實現如時間穿梭般的調試體驗。
由於 store 中的狀態是響應式的，在組件中調用 store 中的狀態簡單到僅需要在計算屬性中返回即可。觸發變化也僅僅是在組件的 methods 中提交 mutation。
這是一個最基本的 Vuex 記數應用示例。