state
- Vuex就是一個倉庫，倉庫里面放了很多對象，其中state就是數(shù)據(jù)源存放地，對應(yīng)一般Vue對象里面的data
- state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變，依賴這個數(shù)據(jù)的組件也會發(fā)生更新
- 通過mapState把全局的state和getters映射到當(dāng)前組件的computed計算屬性中
getters
- getters可以對state進行計算操作，它就是store的計算屬性
- 雖然在組件內(nèi)也可以做計算屬性，但是getters可以在多組件之間復(fù)用
- 如果一個狀態(tài)只在一個組件內(nèi)使用，可以不用getters

Mutations

每個mutations都有一個字符串的事件類型（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++
        }
    }
})

不能直接調(diào)用一個mutation handler。這個選項更像是事件注冊，當(dāng)觸發(fā)一個類型為increment的mutations時，調(diào)用此函數(shù)。要喚醒一個mutation handler，需要調(diào)用相應(yīng)的type調(diào)用store.commit方法

store.commit('increment')

提交載荷（payload）

可以向store.commit傳入額外的參數(shù)，即mutation的載荷（payload）

state:{
    count:0
},
mutations:{
    increment(state,n){
        state.count += n
    }
}

//組件
store.commit('increment',10)

在大多數(shù)情況下，載荷應(yīng)該是一個對象，這安樣可以包含多個字段并且記錄的mutation會更易讀

state:{
    count:0
},
mutations:{
    increment(state,payload){
        state.count += payload
    }
}

//組件
store.commit('increment',{
    amount:10
})

Mutation需遵守Vue的響應(yīng)規(guī)則

既然Vuex的store中的狀態(tài)時響應(yīng)式的，那么當(dāng)我們變更狀態(tài)時，監(jiān)聽狀態(tài)的Vue組件也會自動更新。這也意味著Vuex中的mutation需要與使用Vue一樣遵守一些注意事項：

最好提前在store中初始化好所有所需屬性

當(dāng)需要在對象上添加新屬性時，應(yīng)該

mutation必須是同步函數(shù)

使用Vue.set(obj,'newProp,123)

以新對象替換老對象。例如，利用對象展開運算符

state.obj = {...state.obj,newProp:123}

actions

action類似于mutation，不同在于：

action通過store.dispatch方法觸發(fā)

store.dispatch('increment')

在action內(nèi)部執(zhí)行異步操作

actions:{
    incrementAsync({commit}){
        setTimeout(() => {
            commit('increment')
        },1000)
    }
}

action同樣支持載荷方式和對象方式進行分發(fā)

//以載荷形式分發(fā)
store.dispatch('incrementAsync',{
    amount:10
})
//以對象形式分發(fā)
store.dispatch({
    type:'incrementAsync',
    amount:10
})

action提交的是mutation，而不是直接變更狀態(tài)
action可以包含任意異步操作

module

module可以讓每個模塊擁有自己的state、mutations、action、getters使得結(jié)構(gòu)非常清晰，方便管理

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB
})

使用Vuex的好處