Vue3中Vuex mutations传payload，@click触发计数累加不生效如何解决？

你在Counter.vue中配置方法的选项名拼写错误：Vue 组件的方法配置项是复数形式的methods，你写成了单数method，导致mapMutations映射的addToCounter方法没有正确挂载到组件实例上，触发@click时自然无响应。

修改Counter.vue的script部分，将method改为methods即可：

<script>
import { mapState, mapMutations  } from "vuex"
export default {
  data() {
    return{
      //payload
      value: 1,
    }
  },
  computed: {
    ...mapState(["counter"])
  },
  // 此处原单数method改为复数methods即可
  methods: {
    ...mapMutations(["addToCounter"])
  }
}
</script>

确保你的组件模板中调用addToCounter时传入了payload参数，否则累加逻辑也无法生效，模板示例如下：

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="addToCounter(value)">+</button>
  </div>
</template>

内容的提问来源于stack exchange，提问作者user16295310