介绍

mapMutations是Vuex的mutation的辅助函数,用于在组件中映射mutation内的方法,以便在该组件中直接使用mutation里的方法 (语法糖)

使用步骤

1.在组件中导入vuex中的mapMutations

1
import { mapMutations } from 'vuex'

2.在组件中导入mutation里的方法名

1
2
3
4
...mapMutations([   //使用es6的拓展运算符
'INCREASE_SHOPCART',
'DECREASE_SHOPCART'
])

这一步,是将mutation里的函数映射到组件里,在组件里 :

1
this.INCREASE_SHOPCART === this.$store.commit('INCREASE_SHOPCART') //true

在有参数的情况下,mutation的state默认参数可以省略 :

1
this.INCREASE_SHOPCART(id) === this.$store.commit('INCREASE_SHOPCART',id) //true

组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

关于映射官网也有相关的介绍说明 –> Mutation

3、举个(热辣辣)的栗子🌰 :点击btn按钮增减商品数量

3.1 mutations

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//mutations.js
INCREASE_SHOPCART(state,id){
state.shopCartData.forEach(e=>{
if(e.id === id){
e.count ++
}
})
},
DECREASE_SHOPCART(state,id){
state.shopCartData.forEach(e=>{
if(e.id === id && e.count >1){
e.count --
}
})
}

3.2 组件里的methods

如果对使用方法有疑问可以看之前的文章:Vuex的使用,里面有介绍。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { mapMutations } from 'vuex' // 先从vuex里导入 mapMutations
methods:{
...mapMutations([
'INCREASE_SHOPCART', //将mutation里的方法映射到该组件内
'DECREASE_SHOPCART' //等同于this.$store.commit('DECREASE_SHOPCART')
]),
increase(id){
//由于上一步已经将mutation映射到组件内,所以组件可以直接调用INCREASE_SHOPCART
this.INCREASE_SHOPCART(id)
}
decrease(id){
this.DECREASE_SHOPCART(id)
}
}

3.3 Vue文件

我们可以直接调用methods里定义的方法即可

1
2
3
4
5
6
//Cart.vue 
<template>
<button @click='decrease(item.id)'>-</button>
<input type="number" class="fl" v-model="item.count">
<button @click='increase(item.id)'>+</button>
<template>

总结

主要介绍使用mapMutations辅助函数,内部将mutation里的方法映射到该组件内,相比使用this.$store.commit('xxx')更为之方便一点。除此之外还有mapState, mapActions, 用法也类似。在系列(一) – Vuex的使用中的每个核心概念都介绍了辅助函数的用法,又或者可能移步到官网查看更详细的介绍喔 –> Vuex官网

CodeSandbox

CodeSandbox在线代码演示

注意 如遇到CodeSandBox打开失败,请尝试按下图操作,然后分窗口就能一边看代码一边看效果啦
sandbox