Vuex - 변환 핸들러 외부에 있는 vuex 저장소 상태를 변환하지 마십시오.내부 돌연변이 상태 변화

Vuex - 변환 핸들러 외부에 있는 vuex 저장소 상태를 변환하지 마십시오.내부 돌연변이 상태 변화

메인 레이아웃(nuxt.js default.vue)에서 스토어 액션을 호출하고 돌연변이 내보내기 내의 상태 돌연변이를 호출합니다.이 에러가 발생하는 이유는 무엇입니까?

콘솔 오류: http://prntscr.com/rwvfjf

코드:

체납.표시하다

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

스토어(Store/index.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;
  },
}

문서에서:

돌연변이는 동기화되어야 합니다.

기억해야 할 중요한 규칙 중 하나는 변환 핸들러 함수가 동기화되어야 한다는 것입니다.

당신이 그것들을 뒤집은 것 같아요.작업 및 변환 재구축:

액션.

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;
  },
}

또한 비동기 액션은 데이터를 반환하고 변환에 전달되며 변환은 상태로 설정됩니다.에 오류가 있을 수 있습니다.this.$axios그것도 고쳐지면요이 경우 Import하고 있는지 확인합니다.

import axios from 'axios';

다음과 같이 사용합니다.

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

언급URL : https://stackoverflow.com/questions/61144344/vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers-state-changed-i