详解关于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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
vue v-model动态生成详解
Jun 30 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
vue.js循环radio的实例
Nov 07 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
jQuery把表单元素变为json对象
2013/11/06 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
Vue组件开发初探
2017/02/14 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
python变量不能以数字打头详解
2016/07/06 Python
全面分析Python的优点和缺点
2018/02/07 Python
python2与python3共存问题的解决方法
2018/09/18 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
批评与自我批评材料
2014/02/15 职场文书
应届生求职自荐信
2014/07/04 职场文书
汽车转让协议书
2015/01/29 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
MySQL创建定时任务
2022/01/22 MySQL
golang生成vcf通讯录格式文件详情
2022/03/25 Golang