详解关于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插件实现图片延迟加载技术详细说明
Mar 12 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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 UTF8 文件的签名问题
2009/10/30 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
人大调研汇报材料
2014/08/14 职场文书
师德师风整改措施
2014/10/24 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
给客户的检讨书
2014/12/21 职场文书
项目合作意向书
2015/05/08 职场文书
海上钢琴师观后感
2015/06/03 职场文书
小学教师见习总结
2015/06/23 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL