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

Question

我需要帮助。

我使用的是Quasar 2(Vue 3框架(。

为什么突变中的CCD_ 1返回"；[vuex]在突变处理程序之外不突变vuex存储状态"；错误

存储

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(...

谢谢！

Answer 1

更改

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

至

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

解决了问题。