vuex辅助函数的使用mapGetters,mapActions,mapMutations

在vuex中,有些状态属性会有些重复和冗余,为了解决这个问题我们可以使用辅助函数来简化处理代码,辅助函数的使用方法如下
第一步:在当前页面导入辅助函数

import { mapGetters,mapActions } from "vuex";

第二步骤,使用辅助函数,辅助函数的使用有两种方法,使用数组和对象的方式,对象可以自定义属性名和数组使用默认属性名

//数组使用方式
methods: {
  ...mapActions([JIANNUM,ADDNUM])
  },computed: {
  ...mapGetters(['getcarttotalprice'])
  }
//对象的使用方式
methods: {
  ...mapActions({
  ’jiannum‘:JIANNUM,
  ’addnum‘:ADDNUM,
})
  },computed: {
  ...mapGetters({
’getprice‘:’getcarttotalprice‘
}) }

第三步:直接在div使用

  <span @click="addnum(item.iid)">+</span> //在iid写在后面就可以直接给vuex中的方法传参
 <i>{{getcarttotalprice}}</i> 

注意如果需要传参数直接写在事件后面就可以

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容