摘要：來自不同視圖的行為需要變更同一狀態(tài)。圖解后端的行為，響應(yīng)在上的用戶輸入導(dǎo)致的狀態(tài)變化。中的非常類似于事件每個都有一個字符串的事件類型和一個回調(diào)函數(shù)。

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

Vuex采用和Redux類似的單向數(shù)據(jù)流的方式來管理數(shù)據(jù)。用戶界面負(fù)責(zé)觸發(fā)動作（Action)進(jìn)而改變對應(yīng)狀態(tài)（State），從而反映到視圖（View）上。

  new Vue({
      el: "#app",
      //state 驅(qū)動應(yīng)用的數(shù)據(jù)源
      data () {
        return { count: 0 }
      },
      //view 以聲明方式將 state 映射到視圖；
      template: "
{{ count }}
",
      //actions 響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。
      methods: {
        increment () {
          this.count++
        }
      }
    })

讓我們從一個簡單的 Vue 計數(shù)應(yīng)用開始：

  const store = new Vuex.Store({
      //有哪些狀態(tài)
      state: {
        count: 0
      },
      actions: {
        incrementAction (store) {
          store.commit("increment")
        }
      },
      //改變，可以通過調(diào)用這個改變的方法來修改state的值
      mutations: {
        increment (state) {//這里面的方法的第一個就是state，我們可以直接修改
          state.count++
        }
      }
    })

這個狀態(tài)自管理應(yīng)用包含以下幾個部分：

state，驅(qū)動應(yīng)用的數(shù)據(jù)源；
view，以聲明方式將?state?映射到視圖；
actions，響應(yīng)在?view?上的用戶輸入導(dǎo)致的狀態(tài)變化

但是，當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時，
單向數(shù)據(jù)流的簡潔性很容易被破壞：

多個視圖依賴于同一狀態(tài)。

來自不同視圖的行為需要變更同一狀態(tài)。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。對于問題二，我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導(dǎo)致無法維護的代碼。
因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構(gòu)成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！
另外，通過定義和隔離狀態(tài)管理中的各種概念并強制遵守一定的規(guī)則，我們的代碼將會變得更結(jié)構(gòu)化且易維護。
這就是 Vuex 背后的基本思想.

雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架。這需要對短期和長期效益進(jìn)行權(quán)衡。
如果您不打算開發(fā)大型單頁應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應(yīng)用夠簡單，您最好不要使用 Vuex。一個簡單的?global event bus?就足夠您所需了。但是，如果您需要構(gòu)建是一個中大型單頁應(yīng)用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。

Backend API:  后端的API
Actions：行為，響應(yīng)在?view?上的用戶輸入導(dǎo)致的狀態(tài)變化。
Mutations: 突變，mutations, 通俗的理解，里面裝著一些改變數(shù)據(jù)方法的集合，這是Veux設(shè)計很重要的一點，就是把處理數(shù)據(jù)邏輯方法全部放在mutations里面，使得數(shù)據(jù)和視圖分離。
State: Vuex 使用單一狀態(tài)樹——是的，用一個對象就包含了全部的應(yīng)用層級狀態(tài)。至此它便作為一個“唯一數(shù)據(jù)源 (SSOT)”而存在。這也意味著，每個應(yīng)用將僅僅包含一個 store 實例。
Vue Components:  Vue的組件
Devtools: 工具
Mutate: 變異，相當(dāng)于修改
Render: 提供，響應(yīng)

Commit的問題
**為什么不能直接調(diào)用mutation方法，而是必須得通過commit來提交mutation呢？
官方解釋道：
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態(tài)
      state.count++
    }
  }
})

你不能直接調(diào)用一個 mutation handler。這個選項更像是事件注冊：“當(dāng)觸發(fā)一個類型為 increment 的 mutation 時，調(diào)用此函數(shù)?！币獑拘岩粋€ mutation handler，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：store.commit("increment")

VueComponents—{Dispatch (傳入)}—>Actions—{Commit (提交)}-->Mutations—{Mutate(修改)}—>State—{Render(響應(yīng))}-->VueComponents

State: 相當(dāng)于組件里面的data，是用來存放數(shù)值。
Getter: 相當(dāng)于vue里面的computed
Actions: 相當(dāng)于vue里面的methods

  const store = new Vuex.Store({
      //有哪些狀態(tài)
      state: {
        count: 3
      },
      // 相當(dāng)于state的計算屬性
      getters: {
        evenOrOdd: state => {
          return state.count % 2 === 0 ? "even" : "odd"
        }
      },
      actions: {// 可以包含異步的代碼
        incrementAction (store, amount) {
          store.commit("increment", amount)
        },
        decrement ({ commit }) {
          commit("decrement")
        }
      },
      //改變，可以通過調(diào)用這個改變的方法來修改state的值
      mutations: {
        increment (state, amount) {//這里面的方法的第一個就是state，我們可以直接修改
          state.count += amount
        },
        decrement (state) {
          state.count--
        }
      }
    })

    var app = new Vue({
      el: "#app",
      computed: {
        counter () {
          return store.state.count
        },
        evenOrOdd () {
          return store.getters.evenOrOdd
        }
      },
      methods: {
        add () {
          store.dispatch("incrementAction", 5)
        },
        decrement () {
          store.dispatch("decrement")
        }
      }
    })