时间戳

首页 > 解决方案 > Nuxt js如何在商店中调度动作并改变状态

vue.js - Nuxt js如何在商店中调度动作并改变状态

问题描述

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

这是我的问题：

我在 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

控制台中的错误。

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

标签： vue.jsvuexnuxt.js

解决方案

你的错误在于：

this.$store.commit('openMenu')

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

要触发您需要调度的操作dispatch：

this.$store.dispatch('openMenu')

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

解决方案

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

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

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

其中描述了两者及其用例都很好。

推荐阅读