Vuex参数传递

在Vuex中，可以使用action来传递参数到mutation中执行。在action内部使用context.commit()来执行mutation并传递参数。

例如，在store中定义一个state和一个mutation：

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state, n) {
      state.count += n
    }
  },
  actions: {
    increment ({commit}, n) {
      commit('increment', n)
    }
  }
})

可以发现，actions中的context包含有commit属性，可以用来调用mutations。

此时，在组件中调用action时可以传递参数n，如下所示：

// MyComponent.vue
<template>
  <div>
    <button @click="incrementCount">Increment</button>
  </div>
</template>
<script>
export default {
  methods: {
    incrementCount() {
      this.$store.dispatch("increment", 10);
    }
  }
}
</script>

这里将参数10传递到了increment action中，action再调用mutation的时候将这个参数传递给它。

需要注意的是，在action中传递的参数要在commit时作为第二个参数传递给mutation。