Vuex Mutation не может обновить состояние с помощью localalstorage - PullRequest
Новая
       53

Vuex Mutation не может обновить состояние с помощью localalstorage

0 голосов
/ 20 сентября 2018

Я создаю приложение, которое реализует JWT, используя Vue + Vuex,

Все работает нормально, пока я не использовал 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, но после прочтения строгого режима нет никаких ограничений для использования побочных эффектов ( может быть? В моем понимании ) в мутации

любой ответ будет принят с благодарностью

1 Ответ

0 голосов
/ 20 сентября 2018

Первая проблема: функция мутации принимает только 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;
}
...