Vue.js Nuxt js如何在存储中调度操作并更改状态

我看过一些关于它的文章，但我不太明白

我的问题是：

我在nuxt中有一个组件

<a @click="openMenu">Open Menu</a>
<div v-if="isUserNav"> ...  </div>

这里是vuex商店：

import Vuex from 'vuex'


const createStore = () => {
    return new Vuex.Store({
        state: () => ({
            // USER NAV COMPONENT
            isUserNav: false,
            testData: "Hello"
        }),
        actions: {
            async openMenu() {
              this.state.isUserNav = true;
            }
          }
    })
}

export default createStore

我不能运行操作，我可以访问操作，但它提供

[vuex] unknown mutation type: openMenu

控制台中出现错误

我在哪里犯了错误？我需要做什么？

你的错误在于：

this.$store.commit（'openMenu'）

它触发的不是

动作

，而是

突变

。您没有该变异，因此会收到消息

[vuex]未知变异类型：openMenu

要触发操作，您需要使用

dispatch

：

this.$store.dispatch（'openMenu'）

但是你的行为写得不正确，也不起作用，行为也不是为了直接改变状态。他们进行变异，然后变异状态

解决方案 所以在你的例子中，突变似乎已经足够了，所以将你的行为重写为突变应该有助于实现你的目标

mutations: {
  openMenu(state) {
    state.isUserNav = true
  }
}

查看vuex文档中的突变和操作：

这两种方法都很好地描述了它们和它们的用例。

您的错误在于：

this.$store.commit（'openMenu'）

它触发的不是

动作

，而是

突变

。您没有该变异，因此会收到消息

[vuex]未知变异类型：openMenu

要触发操作，您需要使用

dispatch

：

this.$store.dispatch（'openMenu'）

但是你的行为写得不正确，也不起作用，行为也不是为了直接改变状态。他们进行变异，然后变异状态

解决方案 所以在你的例子中，突变似乎已经足够了，所以将你的行为重写为突变应该有助于实现你的目标

mutations: {
  openMenu(state) {
    state.isUserNav = true
  }
}

查看vuex文档中的突变和操作：

这两种方法都很好地描述了它们和它们的用例