Vuex系列(四) -- 辅助函数mapMutations解析这是我参与更文挑战的第13天，活动详情查看：更文挑战介

这是我参与更文挑战的第13天，活动详情查看：更文挑战

介绍

之前我们已经完整介绍了整个Vuex, 回看可以点击文末的友情链接进行查看。

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

使用步骤

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

import { mapMutations } from 'vuex'

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

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

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

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

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

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

//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的使用，里面有介绍。

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里定义的方法即可

//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打开失败，请尝试按下图操作，然后分窗口就能一边看代码一边看效果啦