详解关于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插件制作 自增长输入框实现代码
Aug 17 jQuery
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
浅谈Web Storage API的使用
Jun 23 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记录代码执行时间(实现代码)
2013/07/05 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
python机器学习之神经网络(一)
2017/12/20 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python贪吃蛇游戏代码
2020/04/18 Python
浅谈Python基础—判断和循环
2019/03/22 Python
python装饰器的特性原理详解
2019/12/25 Python
Python安装Bs4的多种方法
2020/11/28 Python
创新比赛获奖感言
2014/02/13 职场文书
暑期社会实践感言
2014/02/25 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
个人租房协议书范本
2014/09/30 职场文书
刑事和解协议书范本
2014/11/19 职场文书
任命书标准格式
2015/03/02 职场文书
社团个人总结范文
2015/03/05 职场文书
图书馆义工感想
2015/08/07 职场文书
2016年寒假家长评语
2015/10/10 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python