详解关于Vuex的action传入多个参数的问题


Posted in Javascript onFebruary 22, 2019

问题:

已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成

然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数

一开始遇到的问题是加入购物车方法中要传入一个字典对象里面保存产品信息item,还要传入一个产品数量的参数num

然而如果这么写的话就会报错:context.commit(mutations,item,num)

解决办法:

将第二个参数以对象的放式提交就像这样

mutations = {
  PRODUCT_ADDTO_CART:(state,product) => {
    //code
  }
}
actions = {
  productaddtocart:(context,value) => {
    context.commit('PRODUCT_ADDTO_CART', value);
  },
}

在页面调用方法的时候是这样的:

productAddToCart(item,productNum){
      this.productaddtocart({"item":item,"num":this.productNum})
}

这里的关键信息是将参数打包成一个字典对象传入,在mutations里面调用的话就product.item,product.num就解决了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
javascript操作表格排序实例分析
May 06 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 #Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 #Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 #Javascript
浅谈Node框架接入ELK实践总结
Feb 22 #Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 #Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 #Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 #Javascript
You might like
一个简单计数器的源代码
2006/10/09 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
浅析tr的隐藏和显示问题
2014/03/05 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
理工大学毕业生自荐信范文
2014/02/22 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
拓展策划方案
2014/06/03 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
工作检讨书范文
2015/01/23 职场文书
护士节慰问信
2015/02/15 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang