mapMutations详细讲解

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

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

import { mapMutations } from 'vuex'

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

...mapMutations([   //使用es6的拓展运算符
        'INCREASE_SHOPCART',   
        'DECREASE_SHOPCART'   
      ]) 
//约定将mutation里的方法名为大写,并且导入时要给其加上引号

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

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

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

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

举个栗子:点击btn按钮增减商品数量

  • 组件dom :
//shopCart.vue 
//template
  <button class="fl" @click='decrease(item.id)'>-</button>
  <input type="number" class="fl" v-model="item.count"  >
  <button class="fl" @click='increase(item.id)'>+</button>
  
  • 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 --
      }
    })
  }
  • 组件里的methods:
import { mapMutations } from 'vuex' // 先从vuex里导入 mapMutations
methods:{
     ...mapMutations([  
        'INCREASE_SHOPCART', //将mutation里的方法映射到该组件内
        'DECREASE_SHOPCART'  //等同于this.$store.commit('DECREASE_SHOPCART')  
      ]),
     increase(id){
        this.INCREASE_SHOPCART(id)
//由于上一步已经将mutation映射到组件内,所以组件可以直接调用INCREASE_SHOPCART  
     }
     decrease(id){
        this.DECREASE_SHOPCART(id)
//同理
     }
}

 

  • 23
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值