vuex 版本為^2.3.1，按照我自己的理解來整理vuex。
vuex 是什麽

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

• 什麽是狀態？
  • 狀態這裏泛指 vue 組件的一些當前的狀況和性質，例如當前 a 組件是獲取到了10條數據，這是一個狀態，b 組件滾動到某個位置，這也是一個狀態。
• 狀態管理是什麽：
  • 狀態管理是對之前說的狀態進行管理，例如 a 組件這個狀態需要通知 b 組件，或者 b 組件的當前狀態需要觸發 b 的父組件的某個屬性。
  • 具體有以下三個內容：
    • state，驅動應用的數據源；
    • view，以聲明方式將 state 映射到視圖；
    • actions，響應在 view 上的用戶輸入導致的狀態變化

狀態管理的三個內容是怎麽使用的呢？就需要先知道 vue 是單向數據流的方式驅動的，然後三個內容的使用其實是下面這個循環圖，state 會顯示到 view，用戶會根據 view 上的內容進行操作，觸發 actions 然後再去影響 state（這裏先不管三個東西是哪個先起頭的）

作者： 鏈接：https://www.imooc.com/article/22719 來源：慕課網 本文原創發布於慕課網 ，轉載請註明出處，謝謝合作

正常情況下很好理解和使用，因為都是單向的，非黑即白，但是面對復雜的業務環境之下，單向流方式會很容易遭到破壞：

• 多個視圖依賴於同一狀態。
  • 解決的話需要使用傳參方式，但對於多層嵌套的組件將會非常繁瑣，並且對於兄弟組件間的狀態傳遞無能為力。
• 來自不同視圖的行為需要變更同一狀態。
  • 解決的話采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。

以上的這些模式非常脆弱，主要是因為多個組件之間的關系會變得很復雜，通常會導致無法維護的代碼。

有見及此，vuex 借鑒了 Flux、Redux、和 The Elm Architecture的設計思想，將狀態管理單獨抽離出來，形成了現在的 vuex。官方也畫出了一個圖來說明 vuex 在哪裏起作用的，參看下圖：

作者： 鏈接：https://www.imooc.com/article/22719 來源：慕課網 本文原創發布於慕課網 ，轉載請註明出處，謝謝合作

這個圖是需要解釋一下的：

• vuex 的區域是綠色虛線框的位置
• 流程：
  • 每次 vue 組件需要 給 vuex 分派 一個 actions，actions 提交一個 mutation，由 mutation 來修改 state，然後再返回給 vue 組件渲染。
  • state 狀態只能由 mutation 來修改。
  • actions 會可以封裝各種 mutation 來進行修改 state。
• 關於 state：state 就是狀態
• 關於 mutation：mutation 是 vuex 對 state 或者 store 提交修改的唯一方式，不用管太多特別的含義。
• 關於 getter：
  • 這裏沒有出現 getter， 因為 getter 在這個流程裏面不需要出現，他只是一個屬性，方便從 vuex 的內存裏面獲取一些信息。
• 關於 actions：
  • Action 提交的是 mutation，而不是直接變更狀態。
  • Action 可以包含任意異步操作。

筆者自己的理解就是Action 相當於一把手槍，mutation 相當於裏面的子彈，靶心就是 state， 得分指示牌就是 getter 。

什麽情況下我應該使用 Vuex？

雖然 Vuex 可以幫助我們管理共享狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。

• 如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。
• 如果是簡單應用一個簡單的 global event bus （即做一個全局的變量或者全局對象）就足夠您所需了。
• 但是，如果您需要構建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。

基礎樣例

• 每一個 Vuex 應用的核心就是 store（倉庫）。
• 基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。
• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麽相應的組件也會相應地得到高效更新。
• 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。

總的來說就是 vuex 的狀態是存儲在 store 裏面的，要修改狀態就只能進行 mutation 的提交 commit，一旦進行提交成功，狀態被改變後，相關使用該狀態的組件也會更新狀態信息。

作者： 鏈接：https://www.imooc.com/article/22719 來源：慕課網 本文原創發布於慕課網 ，轉載請註明出處，謝謝合作

// 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex) 
const store = new Vuex.Store({
 state: {
 count: 0
 },
 mutations: {
 // 只能通過 mutation 來進行狀態變更
 increment (state) {
 state.count++
      }
    }
 })

需要使用 es2015語法編寫 javascript
作者：
鏈接：https://www.imooc.com/article/22719
來源：慕課網
本文原創發布於慕課網 ，轉載請註明出處，謝謝合作

 // 通過vuex 的 mutation 進行 commit store.commit(‘increment‘)
 // 通過store.state來獲取狀態對象 console.log(store.state.count) // -> 1

vuex 基本入門和使用（一）