Nuxt js 如何在存储和更改状态中分派动作

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')

触发的不是 anaction而是 a mutation。你没有那个突变，所以你得到了消息[vuex] unknown mutation type: openMenu。

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

this.$store.dispatch('openMenu')

但是你的动作写得不正确，不会起作用，动作不是为了直接改变状态。他们提交突变，然后改变状态。

解决方案

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

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

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

• https://vuex.vuejs.org/guide/mutations.html

• https://vuex.vuejs.org/guide/actions.html

对两者及其用例的描述都非常好。