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

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

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

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

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

Store(最基本的概念)

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

Getters

Mutations

Actions

Modules

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

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。

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

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

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

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

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

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

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

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

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

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

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

要喚醒一個(gè) 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 屬性的對(duì)象：

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

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài)。

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

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