处理vuex刷新页面数据丢失

vuex中处理页面刷新后数据丢失的问题：

大家用vue开发的时候，经常会用到vuex状态管理，这就出现了一个问题，当我们刷新页面之后，保存在vuex实例store里的数据会丢失。

1、产生的原因：

因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

2、解决问题：

1. 一种是state里的数据全部是通过请求来触发action或mutation来改变

2. 一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中。

3、具体方法：

     因为我们是只有在刷新页面时才会丢失state里的数据，那就在点击页面刷新时先将state数据保存到sessionStorage。

     这时候就会用到beforeunload，这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢？我们总不能每个页面都监听这个事件，

    所以我选择放在app.vue这个入口组件中，这样就可以保证每次刷新页面都可以触发。

   上代码：