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

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

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

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

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

Store(最基本的概念)

State (數(shù)據(jù))

Getters

Mutations

Actions

Modules

安裝 Vuex 之后，讓我們來創(chuàng)建一個 store

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

通過 store.state 來獲取狀態(tài)對象，以及通過 store.commit 方法觸發(fā)狀態(tài)變更：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

要喚醒一個 mutation handler，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：

store.commit("increment")  

你可以向 store.commit 傳入額外的參數(shù)，即 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，而不是直接變更狀態(tài)。

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

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