详解关于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 相关文章推荐
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
vue slot与传参实例代码讲解
Apr 28 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
第十三节 对象串行化 [13]
2006/10/09 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
送货司机岗位职责
2013/12/11 职场文书
业务部经理岗位职责
2014/01/04 职场文书
说明书范文
2014/05/07 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
涨价通知
2015/04/23 职场文书
golang slice元素去重操作
2021/04/30 Golang