详解关于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代码超级推荐
Apr 05 Javascript
js几个验证函数代码
Mar 25 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
package.json配置文件构成详解
Aug 27 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
React中Ref 的使用方法详解
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
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
阿德的梦教学反思
2014/02/06 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
市场营销专业自荐书
2014/06/10 职场文书
在校实习生求职信
2014/06/18 职场文书
软件测试专业推荐信
2014/09/18 职场文书
模范教师事迹材料
2014/12/16 职场文书
召开会议通知范文
2015/04/15 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS