我目前正在使用这个插件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 接收 token 作为参数。如何将其保存到本地存储?
最佳答案
我认为您误解了 vuex-persistedstate 的用法。将其添加到存储插件(plugins: [createPersistedState()]
)后,它会在每次突变提交时自动使用存储的副本更新 localStorage 变量 vuex
(请参阅 example )。因此,您的 token 应该已经位于 localStorage
的 vuex.authToken
内。
如果您只想存储具有自定义名称的变量,则无需插件即可实现:localStorage.setItem('key', 'value')
。请参阅 this question 。
关于vuejs2 - 使用vuex持久状态将数据保存到本地存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54399867/