Question

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

在使用 localStorage 之前，一切正常。

这是我的代码：

store.js

 <div class="card-text">
     <img id="image_upload_preview" {% if adminform.form.photo.? %}src="{{ adminform.form.photo.? }}"{% endif %} />
     <input type='file' id="inputFile" name="photo" class="img-choose" />
  </div>

constants.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;
}

现在，当我使用我的API时，它返回了正确的令牌，但在变异中，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') || "";仍然是state.token。

有什么我想念的东西还是仅仅是限制？

无论如何，我已经转向null，但在阅读严格模式后，在突变中使用副作用（也许是我的理解 ）就没有限制

任何答案将不胜感激

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突变无法使用本地存储更新状态

1 个答案: