为什么需要做token数据的持久化?
在Vuex中,我们需要在state里面定义一个变量 token: '', 用来保存token,当我们发送请求拿到token,并通过mutations里面的函数给state.token赋值,但是当我们刷新页面的时候,因为入口文件main.js会再一次同步执行,里面的store模块中的 token: '', 也会再执行一次,所以这时候token的值会变空。
解决方法1,在拿到token 的时候,使用本地存储,将token保存到本地,localStorage.setItem(key, value)
data() {
return {
token: localStorage.getItem('token') || ''
}
},
mutations: {
updateToken (state, newtoken) {
localStorage.setItem(state.token, newtoken)
}
}
解决方法2: 只用下载一个插件就可以了,只要三步
// 1. 下包
npm install vuex-persistedstate --save
// 2. 导包,在store/index.js里面配置插件
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// 3. 配置插件
plugins: [createPersistedState()],
...
})