摘要：這個回調函數就是我們實際進行狀態更改的地方，并且它會接受作為第一個參數變更狀態要喚醒一個，你需要以相應的調用方法提交載荷你可以向傳入額外的參數，即的載荷提交的另一種方式是直接使用包含屬性的對象類似于，不同在于提交的是，而不是直接變更狀態。

由于多個狀態分散的跨越在許多組件和交互間各個角落，大型應用復雜度也經常逐漸增長。為了解決這個問題，Vue 提供 vuex：
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。

每一個 Vuex 應用的核心就是 store（倉庫）。"store" 基本上就是一個容器，它包含著你的應用中大部分的狀態(state)

1.Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。

2.你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交(commit) mutations。

Store(最基本的概念)

State (數據)

Getters

Mutations

Actions

Modules

安裝 Vuex 之后，讓我們來創建一個 store

var store=new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        jia(state){
            state.count++;
        },
        jian(state){
            state.count--;
        },
    }
});  

通過 store.state 來獲取狀態對象，以及通過 store.commit 方法觸發狀態變更：

 store.commit("jian");
console.log(store.state.count);  

Vuex 使用 單一狀態樹 —— 是的，用一個對象就包含了全部的應用層級狀態。至此它便作為一個『唯一數據源(SSOT)』而存在。這也意味著，每個應用將僅僅包含一個 store 實例。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。

由于 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態：

computed:{
    count(){
        return this.$store.state.count;
    },
    num1(){
        return this.$store.state.num1;
    }
},  

每當 store.state.count 變化的時候, 都會重新求取計算屬性，并且觸發更新相關聯的 DOM。Vuex 通過 store 選項，提供了一種機制將狀態從根組件『注入』到每一個子組件中（需調用 Vue.use(Vuex)）：

 computed:Vuex.mapState({
    count:state=>state.count,
    num1:state=>state.num1,
    }),  

當一個組件需要獲取多個狀態時候，將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數幫助我們生成計算屬性，

// 在多帶帶構建的版本中輔助函數為 Vuex.mapState
computed:Vuex.mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 "count" 等同于 `state => state.count`
    countAlias: "count",

    // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })  

當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。

computed:Vuex.mapState(["count","num1"]),  

我們將它與局部計算屬性混合使用時，我們需要使用一個工具函數將多個對象合并為一個，以使我們可以將最終對象傳給 computed 屬性。

computed: {
...Vuex.mapState(["count","num1"]),  
  localComputed () { /* ... */ },
// 使用對象展開運算符將此對象混入到外部對象中
})
}  

Vuex 允許我們在 store 中定義『getters』（可以認為是 store 的計算屬性）。就像計算屬性一樣，getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。  
Getters 接受 state 作為其第一個參數,Getters 會暴露為 store.getters 對象：

 getters:{
    he(state){
        return  state.count+state.num1+state.num2+getters.jia5;
    },
    
}  

Getters 也可以接受其他 getters 作為第二個參數：

getters:{
    he(state,getters){
        return  state.count+state.num1+state.num2+getters.jia5;
    },
    jia5(state){
        return state.count+5
    }
}  

mapGetters 輔助函數僅僅是將 store 中的 getters 映射到局部計算屬性：

computed:{
     ...Vuex.mapState(["count","num1","num2"]),
     ...Vuex.mapGetters(["he"]),
},
template:"
{{count}}-{{num1}}-{{num2}}={{he}}
"

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數：

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

要喚醒一個 mutation handler，你需要以相應的 type 調用 store.commit 方法：

store.commit("increment")  

你可以向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）：

 mutations:{
    jia(state,arg){
        state.count+=arg.n;
    },
    jian(state,arg){
        state.count-=arg.n;
    },
},

提交 mutation 的另一種方式是直接使用包含 type 屬性的對象：

this.$store.commit({type="jia",n:3})  

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態。

Action 可以包含任意異步操作。

actions:{
     jia(commit){
        commit({type:"jia",n:3});
    }
},