vuex之mapMutation的使用
1.每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。mutations {increment(state){//改变状态的操作}}我们这里只是定义了一个可以改变状态的函数(mutation),我们还需要调用...
·
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")
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)