摘要：來自不同視圖的行為需要變更同一狀態。圖解后端的行為，響應在上的用戶輸入導致的狀態變化。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。

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

Vuex采用和Redux類似的單向數據流的方式來管理數據。用戶界面負責觸發動作（Action)進而改變對應狀態（State），從而反映到視圖（View）上。

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

讓我們從一個簡單的 Vue 計數應用開始：

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

這個狀態自管理應用包含以下幾個部分：

state，驅動應用的數據源；
view，以聲明方式將?state?映射到視圖；
actions，響應在?view?上的用戶輸入導致的狀態變化

但是，當我們的應用遇到多個組件共享狀態時，
單向數據流的簡潔性很容易被破壞：

多個視圖依賴于同一狀態。

來自不同視圖的行為需要變更同一狀態。

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

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

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

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

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

你不能直接調用一個 mutation handler。這個選項更像是事件注冊：“當觸發一個類型為 increment 的 mutation 時，調用此函數。”要喚醒一個 mutation handler，你需要以相應的 type 調用 store.commit 方法：store.commit("increment")

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

State: 相當于組件里面的data，是用來存放數值。
Getter: 相當于vue里面的computed
Actions: 相當于vue里面的methods

  const store = new Vuex.Store({
      //有哪些狀態
      state: {
        count: 3
      },
      // 相當于state的計算屬性
      getters: {
        evenOrOdd: state => {
          return state.count % 2 === 0 ? "even" : "odd"
        }
      },
      actions: {// 可以包含異步的代碼
        incrementAction (store, amount) {
          store.commit("increment", amount)
        },
        decrement ({ commit }) {
          commit("decrement")
        }
      },
      //改變，可以通過調用這個改變的方法來修改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")
        }
      }
    })