Vuex强制刷新数据丢失解决方案

解决思路：

• 将store中的数据缓存到客户端存储中：cookie、local storage、session storage；
  • 考虑到cookie存储空间很小只有4KB，而且存在声明周期，超过这个期限，cookie就会失效；
  • 关于选择使用local storage还是session storage这里就需要看需求：
    • 如果store中的数据在下一次访问时需要用到的话，就可以使用local storage；
    • 如果没有则可以使用session storage，它会在当前会话结束（浏览器窗口关闭）去清除session storage；
• 在App.vue文件的created方法中去监听beforeunload方法，当页面被强制刷新的时候去触发这个方法。

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