如何通过突变带来存储的有效负载

Question

正在使用@click 事件添加数字但不起作用。

Counter.vue

<script>
import { mapState, mapMutations  } from "vuex"
export default {
  data() {
    return{
      //payload
      value: 1,
    }
  },
  computed: {
    ...mapState(["counter"])
  },
  method: {
    ...mapMutations(["addToCounter"])
  }
}
</script>

于 main.js

import { createApp } from 'vue'
import { createStore } from "vuex";

import App from './App.vue';
const store =  createStore({
  state() {
    return {
      counter: 11,
    }
  },
  mutations: {
    addToCounter(state, payload){
      state.counter = state.counter + payload;
    }
  }
})

//connecting store to the application
const app = createApp(App)

//using the store that is created
app.use(store)

app.mount('#app')

没有错误，但 addToCounter 不工作，而应该在触发@click 时将值添加到计数器。

Answer 1

请在发布问题时注意格式。

应该是methods而不是method。
什么是main.js？ Nuxt 中没有这样的文件，您不必创建自己的商店，因为它已经内置：https://nuxtjs.org/docs/2.x/directory-structure/store
createApp 和 createStore 与 Vue3 相关，因此与 Vue2 不兼容（目前由 Nuxt 使用）
你不应该调用 vuex 突变来更新状态，而应该调用一个动作，否则你可能会遇到一些问题。

如何通过突变带来存储的有效负载

How to bring the payload stored via mutations

nuxt.js

vuejs3

vuex4