vuex之mapMutation的使用

1.每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，並且它會接受 state 作爲第一個參數。

mutations {
    increment(state){
        //改變狀態的操作
    }
}

我們這裏只是定義了一個可以改變狀態的函數（mutation），我們還需要調用（觸發）這個函數。而觸發這個函數我們不能直接調用函數，而是要通過commit來觸發這個函數。

this.$store.commit('increment')

括號裏面的就是我們自己定義的事件類型（type）。這樣才真正觸發了這個mutation，狀態才改變了。沒有其他方式可以提交mutation。

2.我們還可以像普通函數一樣傳入額外的參數。

mutations {
    increment(state,payload){
        //改變狀態的操作
    }
}

payload就像普通函數的參數一樣使用。但是通常情況下payload應該是一個對象，方便閱讀。

3.使用常量替代 Mutation 事件類型

即定義一個mutations-type.js文件用於存放mutations的事件類型。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

然後在mutations.js文件中定義一系列的mutation

//mutations.js
import * as type from './mutation-type'
mutations:{
    [type.SOME_MUTATION](state){
        //改變狀態的操作
    }
}

4.Mutation 必須是同步函數

5....mapMutations

<button @click="increment">
//自定義事件類型與mutation的事件類型同名
...mapMutations([
    'increment'
])

//將this.increment() 映射爲 this.$store.commit("increment")




<button @click="add">
//自定義事件類型爲add，mutation事件類型爲increment
...mapMutations({
    add: 'increment'
})

//將this.add() 映射爲 this.$store.commit("increment")

實際上是這樣的

methods: {
    increment() {
        this.$store.commit("increment")
    }
}


methods: {
    add() {
        this.$store.commit("increment")
    }
}