pc端项目,用vuex来做全局的状态管理, 当刷新网页后,保存在vuex实例store里的数据会丢失。比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录
产生原因:因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。
解决方案:
监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/localStorage中。页面打开之后,判断sessionStorage/localStorage中是否存在state对象,如果存在,则说明页面是被刷新过的,将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。
sessionStorage
,选择的原因vue是单页面应用,操作都是在一个页面跳转路由。localStorage生命周期是永久,sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。可以保证打开页面时sessionStorage
的数据为空,而如果是localStorage
则会读取上一次打开页面的数据。store里有可能存储了一些涉密的信息,所以一直在 sessionStorage放着不是太好,页面加载完成后,清空或者删除指定的session。
beforeunload
这个事件在页面刷新时先触发的。所以我选择放在app.vue
这个入口组件中,这样就可以保证每次刷新页面都可以触发。
参考文档:https://blog.csdn.net/guzhao593/article/details/81435342
https://blog.csdn.net/wang1006008051/article/details/82424335