详解关于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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
js中的string.format函数代码
Aug 11 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
详解Bootstrap插件
Apr 25 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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的pcntl多进程用法实例
2015/03/19 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
JS实现复制功能
2017/03/01 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Django数据库操作之save与update的使用
2020/04/01 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
机关单位动员会主持词
2014/03/20 职场文书
技校毕业生自荐信
2014/06/03 职场文书
生物科学专业自荐书
2014/06/20 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
搞笑结婚保证书
2015/05/08 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang