解决问题：Vue项目刷新网页后保存在Vuex实例store.js里的数据state会丢失

1、前情提要：Vue、Vuex

2、问题描述：

使用state做全局的状态管理，但是在任意的一个状态的页面时刷新浏览器页面，就会导致状态丢失，原本属于这个状态的内容和样式全部失效。

3、产生原因：

Vuex实例store.js里的数据state是保存在运行内存中的，当页面刷新时，页面会重新加载Vue实例，store.js里面的数据state就会被重新赋值，故而导致状态丢失。

4、解决思路：

将数据state保存一份到本地存储(localStorage、sessionStorage、cookie）中，可以保证刷新页面数据不丢失且易于读取。

5、解决步骤：

1、选择合适的客户端存储

• localStorage是永久存储在本地，除非主动去删除;

• sessionStorage是存储到当前页面关闭为止;

• cookie根据设置的有效时间来存储，缺点是不能储存大数据且不易读取。

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

2、使用sessionStorage来保存数据state

用sessionStorage来做状态管理，因为我们是只有在刷新页面时才会丢失数据state，所以我们应该在点击页面刷新时先将state数据保存到sessionStorage，然后才真正刷新页面。

使用beforeunload这个事件，令其在页面刷新时先触发。并且将其放在App.vue这个入口组件中，就可以保证每次刷新页面都触发。

具体代码如下：

export default {
  name: 'app',
  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))
    })
  }
}