详解关于Vuex的action传入多个参数的问题

问题：

已知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就解决了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈vuex的基本用法和mapaction传值问题

    vuex的理论知识就不多提了,官网上已经有明确的讲解. 用一个简单的例子来描述一下基本的用法: 第一步:npm install vuex –save-dev 第二步:在目录中创建store目录配置管理状态 //store/index.js /** * Created by zhaohuan on 2017/7/13. */ import Vue from 'vue' import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.St

  • 浅谈vuex之mutation和action的基本使用

    浅谈vuex之mutation和action的基本使用

    我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1 一.mutation 在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,c

  • 详解关于Vuex的action传入多个参数的问题

    问题: 已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成 然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数 一开始遇到的问题是加入购物车方法中要传入一个字典对象里面保存产品信息item,还要传入一个产品数量的参数num 然而如果这么写的话就会报错:context.commit(mutations,item,num) 解决办法: 将第二个参数以对象的放式提交就像这样 mu

  • 详解python requests中的post请求的参数问题

    详解python requests中的post请求的参数问题

    问题:最新在爬取某站点的时候,发现在post请求当中,参数构造正确却获取不到数据,索性将post的参数urlencode之后放到post请求的url后面变成get请求,结果成功获取到数据,对此展开疑问. 1.http请求中Form Data和Request Playload的区别: Ajax post请求中常用的两种参数形式:form data 和 request payload get请求的时候,我们的参数直接反映在url里面,为key1=value1&key2=value2形式,如果是pos

  • 详解使用fetch发送post请求时的参数处理

    详解使用fetch发送post请求时的参数处理 不考虑古董浏览器之后,使用fetch来发送ajax请求,变得非常爽快和时尚. 但是,发送post请求的时候,把笔者卡了一下.后台如下获取参数时,总是为null String q = req.getParameter("q"); 研究了好久,总算写出正确的使用方式了.直接上代码. fetch("/search/project/", { method: "POST", headers: { 'Conte

  • 详解java中反射机制（含数组参数）

    详解java中反射机制(含数组参数) java的反射是我一直非常喜欢的地方,因为有了这个,可以让程序的灵活性大大的增加,同时通用性也提高了很多.反射原理什么的,我就不想做过大介绍了,网上一搜,就一大把.(下面我是只附录介绍下) Reflection 是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其modifiers(诸如public, static 等等).superclass(例如O

  • 详解SpringMVC HandlerInterceptor拦截器的使用与参数

    详解SpringMVC HandlerInterceptor拦截器的使用与参数

    目录 拦截器概念: 拦截器VS过滤器 自定义拦截器开发过程: 拦截器配置项: 多拦截器配置: 拦截器概念: 拦截器( Interceptor)是一种动态拦截方法调用的机制,请求处理过程解析 核心原理: AOP思想 拦截器链:多个拦截器按照一定的顺序,对原始被调用功能进行增强 作用: 在指定的方法调用前后执行预先设定后的的代码 阻止原始方法的执行 拦截器VS过滤器 归属不同: 过滤器属于Servlet技术, 拦截器属于SpringMVC技术拦截内容不同: 过滤器对所有访问进行增强, 拦截器仅针对S

  • 详解keep-alive + vuex 让缓存的页面灵活起来

    详解keep-alive + vuex 让缓存的页面灵活起来

    引入 在使用vue + vue-router开发SPA的时候,有没有遇到过这样的情况:当我们在列表页和详情页之间切换的时候,如果列表页不做缓存,会导致每次从详情页返回时,列表页都会重新加载.如下图: 细心的朋友已经发现了,当从详情页返回列表页的时候,列表页重载了,这样的体验显然不好,这时我们可以对列表页进行缓存处理. keep-alive实现页面缓存 我们的项目不一定所有页面都需要做缓存处理,所以这里介绍两种按需缓存的方法: 方法一: 首先在定义路由的时候配置 meta 字段,自定义一个Keep

  • 详解vue + vuex + directives实现权限按钮的思路

    遇到了一个业务场景: 某个按钮按下去之前需要先判断它是否登陆,如果没有登陆需要跳转到对应的登陆页面,否则就继续该按钮之后的操作. 对于这种问题,很显然不能每个按钮都去判断,所以我思考了一下结合自定义指令和vuex完成了相应的实现. 主要的代码实现 const directive = Vue.directive('permission-click', { bind: (el, binding, vnode) => { el.addEventListener('click', (e) => { i

  • 详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其中最大的问题是使用 vue-cli 构建应用时遇到的问题.通过这些问题深入探索 vue 以及 vuex . 我对于框架的学习一直断断续续,最先接触的是 react,所以有一些先入为主的观念,喜欢 react 更多一点,尤其在应用的构建层面来说.之所以断断续续,是因为自己 JS 基础较弱,刚开始学习的

  • 详解Vue + Vuex 如何使用 vm.$nextTick

    vm.$nextTick 简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新.所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如setTimeout(fn, 0),这样DOM更新后,就会立即执行这块代码. //改变数据 vm.message = 'changed' //想要立即使用更新后的DOM.这样不行,因为设置message后DOM还没有更新 console.log(vm.$el.textCo

  • 详解使用vuex进行菜单管理

    vuex 的优势在复杂状态管理中才能提现出来. 如果项目中有多级菜单,且不同组件中散布多个相同级别的菜单,项目同一时刻各级菜单有且仅有一个高亮,菜单跳转时除了路由改变,相应菜单也要高亮(之前的恢复非高亮状态),这便是个使用 vuex 再好不过的场景. 使用 DOM 操作进行简单菜单管理 使用 DOM 进行菜单管理,背后的思想是:在点击菜单的同时,将事件对象传入事件处理程序,想让当前高亮的 menu 非高亮,再让点击的 menu 高亮. <div class="menu-url"&

随机推荐