锐客网

  1. 首页 > 睿知 > it技术 > >

vue|Vuex——Mutation传递参数

vuejavajs前端

众所周知，我们在用vue时，使用状态管理插件vuex的时候，需要改变状态信息或者共享信息的时候需要通过mutation去改变变量，而当我们用mutations时，需要传递参数的时候应该怎么处理？

methods: { addition() { this.$store.commit('increment') }, }

这是一个组件实例，需要调用store中的mutations中的increment
state: { counter:1000, } mutations: { // 方法 默认有个参数state increment(state) { state.counter++ }, }

这是store中的内容，包括state和mutations，可知当实例调用addition时，会向store中发出一个commit命令，调用其中的increment，而这个increment中的第一个参数是state。
假设有这样一个需求
我并不是counter++，而是根据我的参数决定是加多少

可知这里加提供的参数是5
addCount(count) { // payload: 负载 // 1.普通的提交封装 this.$store.commit('incrementCount',count)// 2.特殊的提交封装 this.$store.commit({ type: 'incrementCount', count }) // 1和2虽然都是提交一个参数count，但当你真正提交到mutations的时候，普通封装对应的mutations接受的count是数字，也就是原来的count // 但是第二种也就是特殊封装对应的mutations接受的count是个对象，是payload对象，可以自己在mutations那边打印看一下,这个时候真正的 // count其实是，count.count },

根据上面代码可以知道有两种提交方式，一种是普通提交，一种是特殊提交，让我们打印提交到mutations后的count到底是什么
mutations: { incrementCount(state,count) { state.counter+=count console.log(count); }, }

vue|Vuex——Mutation传递参数
文章图片

【vue|Vuex——Mutation传递参数】第一种打印出来的就是5，而第二种
vue|Vuex——Mutation传递参数
文章图片

打印出来的是一个对象，而这个对象名为count，并且对象count中有一个key为count，value为5的内容，这个时候我们想要获取的count其实是count.count

    推荐阅读


    上一篇：前端|Vuex —— 组件之间数据共享

    下一篇：没有了