详解关于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 写类方式之五
Jul 05 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
js判断密码强度的方法
Mar 18 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
php设计模式 Delegation(委托模式)
2011/06/26 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP时间函数使用详解
2019/03/21 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python 音频生成器的实现示例
2019/12/24 Python
python手写均值滤波
2020/02/19 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
新娘父亲婚礼致辞
2014/01/16 职场文书
业务内勤岗位职责
2014/04/30 职场文书
组工干部对照检查材料
2014/08/25 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Python道路车道线检测的实现
2021/06/27 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android