Vuex Mutation 无法使用本地存储更新状态

Question

我正在创建一个使用 Vue + Vuex 实现 JWT 的应用程序，

一切正常，直到我使用 localStorage。

这是我的代码：

store.js

import constants from './constants';

*state*
state = {
  token: constants.loginAstoken || constants.token
}

*mutation*
[UPDATE_TOKEN]: (state, {token, sub}) => {
  if(!sub) constants.setToken(token);
  else constants.setLoginAsToken(token);

  token = constants.token;

  axios.defaults.headers.common["Authorization"] = "Bearer " + state.token;
}

constants.js

export function setToken(token) {
  localStorage.setItem('token', token);
}

export function loginAsToken(token) {
  localStorage.setItem('login-as-token', token);
}

export const token = localStorage.getItem('token') || "";
export const loginAsToken = localStorage.getItem('login-as-token') || "";

现在，当我使用我的 API 时，它返回了正确的标记，但在突变中 state.token 仍然是 null。

有什么我遗漏的吗？还是只是限制？

无论如何我已经转strict:true但是在阅读严格模式之后它在使用副作用方面没有任何限制（也许？根据我的理解）在突变

任何答案将不胜感激

Answer 1

第一个问题，突变函数只需要 2 个参数（状态和有效负载）DOC，您将传递第三个未定义的参数。要解决此问题，请使用有效负载作为对象，例如：

[UPDATE_TOKEN]: (state, { token, sub }) => {

第二个问题，您要更改令牌参数值而不是状态：

[UPDATE_TOKEN]: (state, token="", sub="false") => {
  if(!sub) constants.setToken(token);
  else constants.setLoginAsToken(token);

  token = constants.token;  <====

  CHANGE TO

  state.token = token;

  axios.defaults.headers.common["Authorization"] = "Bearer " + state.token;
}

Vuex Mutation 无法使用本地存储更新状态

Vuex Mutation cant update state with localstorage

javascript

store

local-storage

vuex

vuejs2