在使用vuex
时遇到的一个问题是一旦页面刷新,存在vuex
的数据全部丢失。即刷新页面
以前的内存就被释放了,脚本重新加载,变量重新赋值。
如何解决这个问题?
目前已经有很好的第三方插件帮我们做到vuex
持久化,譬
如vuex-persistedstate
当然我在项目中并没有采取第三方插件,而是采用了localStorage
这个方案。
首先我在app.vue
里监听页面刷新:
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener('beforeunload', () => {
localStorage.setItem(VERSION, JSON.stringify(this.$store.state))
})
window.addEventListener('pagehide', () => {
localStorage.setItem(VERSION, JSON.stringify(this.$store.state))
})
页面一旦刷新则将vuex
的state
存入本地,然后在 main.js 中:
// 登录拦截,无法依据后端判断
// 版本号 ,是否需要用户重新登录
// 需要则修改版本号
global.VERSION = 'version4'
// local和store的混合
const reSet = (store, local) => {
for (let i in store) {
store[i] = store[i] ? store[i] : local[i]
}
return store
}
router.beforeEach((to, from, next) => {
// 在页面加载时读取localStorage里的状态信息;
let local = JSON.parse(localStorage.getItem(VERSION))
if (localStorage.getItem(VERSION)) {
store.replaceState(reSet(store.state, local))
} else {
localStorage.clear()
store.commit('RESETSTATE')
}
store.state.uid ||
to.path === '/' ||
to.path === '/login' ||
to.path == '/regist' ||
to.path === '/forgetPass' ||
to.path === '/loanDetails' ||
to.path === '/lendingDetails' ||
to.path === '/creditInfo'
? next()
: router.push('/login')
})
在这里进入路由之前要先将localStorage
的数据传递给vuex
,但这里有个问题
是localStorage
内的数据并不是完全和vuex
的数据是同步的。即我在页面 A 刷新后的
状态会与我在其他页面的状态修改造成冲突。
于是我定义了一个reSet
还混杂vuex
和localStorage
的数据,以有数据的为标准来集
合。
当然这样做的话,每一次的路由跳转都要进行这一步。以后会尝试其他的方案。