nuxt.js - 如何将通过突变存储的有效负载

Question

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

计数器.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 突变来更新状态，而应该调用其他可能会遇到问题的操作。