Question

我看了一些关于它的文章，但是我不太了解

这是我的问题：

我在nuxt中有一个组件

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

基本上我想通过vuex存储将单击更改为isUserNav的状态为true

在我的组件中，我可以访问状态

import {
mapState
} from ‘vuex’

export default {
    computed: {
        ...mapState({
            isUserNav: state => state.isUserNav
        })
    },
    methods: {
        openMenu () {
            this.$store.commit('openMenu')
        },
    }
}

这是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

控制台错误

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

Answer 1

您的错误在于：

this.$store.commit('openMenu')

这不会触发action，而是触发mutation。您没有这种突变，因此您会收到消息[vuex] unknown mutation type: openMenu。

要触发操作，您需要使用dispatch进行调度：

this.$store.dispatch('openMenu')

但是您的动作写得不正确，无法正常工作，并且动作不是直接改变状态的。他们会进行突变，然后突变状态。

解决方案

因此，在您的情况下，一个突变似乎就足够了，因此将您的操作重写为一个突变应该有助于实现您的目标。

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

在vuex文档中查看突变和动作：

对它们及其用例的描述都很好。

Nuxt js如何在存储和更改状态中调度动作

1 个答案:

解决方案