详解关于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中的事件
Sep 23 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
tab栏切换原理
Mar 22 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
koa socket即时通讯的示例代码
Sep 07 Javascript
js实现图片实时时钟
Jan 15 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实现上传文件并存进数据库的方法
2015/07/16 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
浅谈JS运算符&&和|| 及其优先级
2016/08/10 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
jquery中done和then的区别(详解)
2017/12/19 jQuery
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
原生js生成图片验证码
2020/10/11 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python logging模块学习笔记
2014/05/24 Python
python Flask实现restful api service
2017/12/04 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
冬季安全检查方案
2014/05/23 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
优质服务标语口号
2015/12/26 职场文书