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")
    }
}