详解关于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 相关文章推荐
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
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
PHP rsa加密解密使用方法
2015/04/27 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
js计数器代码
2006/11/04 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python list运算操作代码实例解析
2020/01/20 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
python 如何区分return和yield
2020/09/22 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
传播学毕业生求职信
2013/10/11 职场文书
综治工作心得体会
2014/09/11 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
教师辞职书范文
2015/02/26 职场文书
违纪开除通知书
2015/04/25 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS