vuex 错误 - 不要在突变处理程序之外改变 vuex 存储状态答案

【问题标题】：vuex error - do not mutate vuex store state outside mutation handlersvuex 错误 - 不要在突变处理程序之外改变 vuex 存储状态
【发布时间】：2023-03-09 20:54:01
【问题描述】：

我需要帮助。

我正在使用 Quasar 2（Vue 3 框架）。

为什么state.authorization = data.data.data.authorization; in mutation 返回“[vuex] do not mutate vuex store state outside mutation handlers”错误？

商店

import { reactive } from 'vue'
import axios from 'axios'
import { SessionStorage } from 'quasar'

import { LOGIN } from './actions'
import AuthService from './service'

const state = reactive({
  authorization: SessionStorage.getItem('authorization') || null
});

const getters = {
  getAuthorization: state => state.authorization
};

const actions = {
  // Login
  [LOGIN]: ({ commit }, data) => {
    return AuthService.login(data).then(
      data => {
        commit(LOGIN, { data: data });
        return Promise.resolve(data);
      },
      error => {
        commit(LOGIN_ERROR);
        return Promise.reject(error);
      }
    );
  }
}

const mutations = {
  // Login
  [LOGIN]: (state, data) => {
    SessionStorage.set('authorization', data.data.data.authorization);
    state.authorization = data.data.data.authorization;
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.data.data.authorization;
  }
}

export default {
  state,
  getters,
  actions,
  mutations
};

在 .vue 文件中

let data = {
  email: email.value,
  password: password.value
};

store.dispatch(LOGIN, data).then(...

谢谢！

【问题讨论】：

你为什么断定是突变内部的代码触发了警告？ state 不应该是 reactive，这是由 Vuex 完成的
感谢您的回复。如果我评论“state.authorization = data.data.data.authorization;”然后它可以工作，但我需要更改状态。

标签： vue.js vuex vuejs3

【解决方案1】：

变化

const state = {
  authorization: SessionStorage.getItem('authorization') || null
};

到

const state = () => ({
  authorization: SessionStorage.getItem('authorization') || null
});

解决了问题。

【讨论】：