Vuex - не изменять состояние хранилища vuex вне обработчиков мутаций. Состояние изменилось внутри мутации - PullRequest
Новая
       31

Vuex - не изменять состояние хранилища vuex вне обработчиков мутаций. Состояние изменилось внутри мутации

1 голос
/ 10 апреля 2020

Я вызываю действие магазина из основного макета (nuxt. js по умолчанию. vue). Затем я вызываю мутацию состояния в экспорте мутаций. Почему я получаю эту ошибку?

Ошибка в консоли: http://prntscr.com/rwvfjf

Код:

по умолчанию. vue

created () {
  this.$store.dispatch("update_user");
  ...
}

Магазин (магазин / индекс. js) 

export const state = {
  ...
  state: null, 
}

export const actions {
  ...
  update_user({commit}) {commit("update_user")}
}

export const mutations = {
  async update_user(state) {
    if (state.token == undefined) {
      return
    }
    if (this.$axios.defaults.headers.common["authorization"] == undefined) {
      this.$axios.defaults.headers.common["authorization"] = state.token
    }
    var user = await this.$axios.get("/api/v1/user/@me");
    state.user = user;
  },
}

1 Ответ

1 голос
/ 11 апреля 2020

Из документов :

Мутации должны быть синхронными

Следует помнить одно важное правило, что функции обработчика мутаций должны быть синхронный

Похоже, вы перевернули их. Перестройте свое действие и мутацию в:

Действие 

export const actions = {  // <-- was missing an equals
  ...
  async update_user({ state, commit }) { // <-- state and commit needed
    if (state.token == undefined) {
      return
    }
    if (this.$axios.defaults.headers.common["authorization"] == undefined) {
      this.$axios.defaults.headers.common["authorization"] = state.token
    }
    var user = await this.$axios.get("/api/v1/user/@me");
    commit("update_user", user); // <-- Passing the user data to the mutation
  }
}

Мутация 

export const mutations = {
  update_user(state, user) {
    state.user = user;
  },
}

Также обратите внимание, что асинхронное действие c возвращает данные, которые затем передаются в мутация, где он установлен в состояние. Вы также можете иметь ошибку с this.$axios, как только это исправлено. Если это так, убедитесь, что вы импортируете его: 

import axios from 'axios';

и используете его следующим образом: 

if (axios.defaults.headers.common["authorization"] == undefined) {
  axios.defaults.headers.common["authorization"] = state.token
}
...