详解关于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 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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
Protoss热键控制
2020/03/14 星际争霸
我用php+mysql写的留言本
2006/10/09 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
常用的js方法合集
2017/03/10 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
工程总经理工作职责
2013/12/09 职场文书
商场端午节活动方案
2014/01/29 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
实习单位推荐信
2015/03/27 职场文书
民事诉讼代理词
2015/05/25 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL