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

Posted 2023-02-22

【中文标题】vuex 错误 - 不要在突变处理程序之外改变 vuex 存储状态

【英文标题】：vuex error - do not mutate vuex store state outside mutation handlers

【发布时间】：2022-01-21 00:50:51

【问题描述】：

我需要帮助。

我正在使用 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;”然后它可以工作，但我需要更改状态。

【参考方案1】：

变化

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

到

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

解决了问题。