Vuex——Mutation传递参数

众所周知，我们在用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++，而是根据我的参数决定是加多少

<button @click="addCount(5)">+5</button>

可知这里加提供的参数是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);
    },
}

第一种打印出来的就是5，而第二种

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