Vue 刷新网页后 vuex 的 state 数据丢失的解决方案

为啥会丢失数据

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

如何解决

一般情况下有两种解决方案
(a). state 里的数据全部是通过请求来触发 action 或 mutation 来改变
(b). 将 state 里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中

很显然，第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。
而第二种可以保证刷新页面数据不丢失且易于读取。

首先我们看一下有几种 存储, 然后选择合适的客户端存储:

localStorage是永久存储在本地，除非你主动去删除;
sessionStorage是存储到当前页面关闭为止;
cookie 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取。

我选择的是sessionStorage, 因为 Vue 是单页面应用，操作都是在一个页面跳转路由，另一个原因是 sessionStorage 可以保证打开页面时 sessionStorage 的数据为空，而如果是 localStorage 则会读取上一次打开页面的数据。

第一种方案

由于state里的数据是响应式，所以sessionStorage存储也要跟随变化。
再者vuex规定所有state里数据必须通过mutation方法来修改，
所以第一种方案就是mutation修改state的同时修改sessionStorage对应存储的属性

第二种方案

第一种方案确实可以解决问题，但这种方法很明显让人觉得怪异，不如直接用 sessionStorage 来做状态管理更简单些。那问题来了, 怎么才能不用每次修改 state 时同时也要修改 sessionStorage 呢？

思路: 因为我们是只有在刷新页面时才会丢失state里的数据，那有没有办法在点击页面刷新时先将state数据保存到 sessionStorage, 然后才真正刷新页面?

这时 beforeunload 可以为我们很好的解决这个问题, 它是在页面刷新时先触发的。并放在 app.vue 这个入口组件中，这样就可以保证每次刷新页面都可以触发。如下:

export default {
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
      this.$store.replaceState(
        Object.assign({},         
           this.$store.state,JSON.parse(sessionStorage.getItem("store"))
        )
      )
    }
  //在页面刷新时将vuex里的信息保存到sessionStorage里
  window.addEventListener("beforeunload",()=>{
    sessionStorage.setItem("store",JSON.stringify(this.$store.state))
  })
}
``