Nuxt js как отправить действие в хранилище и изменить состояние - PullRequest
Новая
       89

Nuxt js как отправить действие в хранилище и изменить состояние

0 голосов
/ 29 декабря 2018

Я посмотрел некоторые статьи об этом, но я не так много понял

вот моя проблема:

У меня есть компонент в nuxt 

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

в основном, я хочу, чтобы по щелчку изменить состояние isUserNav на true через хранилище vuex

здесь, в моем компоненте, я могу получить доступ к состоянию 

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

в консоли.

, где я делаю ошибку и что мне нужно делать?

1 Ответ

0 голосов
/ 29 декабря 2018

Ваша ошибка заключается в:

this.$store.commit('openMenu')

, которая вызывает не action, а mutation.У вас нет этой мутации, поэтому вы получаете сообщение [vuex] unknown mutation type: openMenu.

Чтобы запустить действие, вам нужно отправить с помощью dispatch:

this.$store.dispatch('openMenu')

Но ваши действия написаны неправильно и не сработают, а действия не направлены на то, чтобы напрямую изменить состояние.Они совершают мутации, которые затем изменяют состояние.

Решение

Так что в вашем случае здесь достаточно с мутацией, поэтому переписывание вашего действия в мутацию должно помочь в достижении вашей цели. 

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

Посмотрите на мутации и действия в документах Vuex:

, которые достаточно хорошо описывают оба варианта и их варианты использования.

...