vuex的state数据丢失的解决方案

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