vuex刷新页面，state数据消失的解决办法

vuex的作用
1，vuex是什么：一个状态管理插件，说人话：就是可以解决组件之间的数据共享问题和实现数据持久化。
vuex的优势：它相对sessionStorage，存储数据稍更安全点，sessionStorage在控制台可以被看到.
vuex的劣势：在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失，因为store是存在于内存的。
解决vuex页面刷新消失的思路
思路：将state中的数据放在浏览器sessionStorage和localStorage中。
解决一：当页面刷新之前把vuex中的数据存入到localStorage中或sessionStorage，
所以在app.vue中加入以下代码

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
// 入口组件
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里
    // beforeunload事件在页面刷新时先触发
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  },
}
</script>

你可能会问这么复杂为什么不直接使用sessionStorage呢？
因为vuex中的变量是响应式的，而localStorage和sessionStorage都不是响应式
当你改变vuex中的状态，组件会检测到改变，而localStorage和sessionStorage就不会了，页面要重新刷新才可以看到改变。所以应让vuex中的状态从localStorage/sessionStorage中得到，这样组件就可以响应式的变化