2

我目前正在使用这个插件vuex-persistedstate

我想将它与我的 Nuxt 应用程序的 Vuex 模块一起使用。

基本上我有一个登录模块，如果成功，然后存储authToken来自响应的localStorage

这是我的代码：

import axios from "axios";
import createPersistedState from 'vuex-persistedstate';

export const state = () => ({
  signInAttrs: {
    email: "",
    password: ""
  },
  authToken: ""
});

export const mutations = {
  SET_AUTH_TOKEN(state, token) {
    state.authToken = token;


    createPersistedState({
      key: 'admin-auth-key',
      paths: [],
      reducer: state => ({
        authToken: '123123123'
      })
    })(store);
  }
};

export const actions = {
  signInAdmin({ commit }, context) {
    return axios.post(`${process.env.BASE_URL}/sign_in`, {
      email: context.email,
      password: context.password
    }).then(response => {
      commit('SET_AUTH_TOKEN', response.data.headers.token);
    }).catch(error => {
      console.log(`failed ${error}`);
    });
  }
};

export const getters = {
  signInAttrs(state) {
    return state.signInAttrs;
  },
  authToken(state) {
    return state.authToken;
  }
};

在突变内部，有SET_AUTH_TOKEN从 API 接收令牌作为参数的。如何将其保存到 localStorage？

4

1 回答 1

3

我认为您误解了 vuex-persistedstate 的用法。一旦您将它添加到 Store 插件 ( )，它会在每次更改提交时使用您的商店副本plugins: [createPersistedState()]自动更新 localStorage 变量（参见示例）。所以你的令牌应该已经在里面了。vuexvuex.authTokenlocalStorage

如果你想简单地存储一个自定义名称的变量，你可以在没有插件的情况下做到这一点：localStorage.setItem('key', 'value'). 看到这个问题。

于 2019-01-28T10:37:29.623 回答