前端 vue单页面应用刷新网页后vuex的state数据丢失的解决方案（转载）

最近接手了一个项目，前端后端都要做，之前一直在做服务端的语言、框架和环境，前端啥都不会啊。

突然需要前端编程，两天速成了JS和VUE框架，可惜还是个半吊子。然后遇到了一个困扰了一整天的问题。一直调试都没办法解决。

最后找到一个极好的解决思路解决了问题。https://blog.csdn.net/guzhao593/article/details/81435342

 

遇到的问题：

由于vue框架设计出来的APP实际上全部设置在同一个html上，跳转是通过路由实现的，

所以，有的控件并不会在跳转时刷新，如果有数据存放在session中，没办法保证没有刷新的控件能及时更新属性值。除非手动F5。

vuex的的作用就是设置一个store，来管理这些需要动态更新的数据。

控件通过computed的绑定，可以保证在store中的数据更新后，控件上对应的数据及时更新。

但是，store的数据是保存在内存中的，当手动F5时，页面会重新加载vue实例，store的数据就全部恢复初始值了，这样就会出现数据丢失的问题。

 

 

解决思路：

将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中，刷新后重新从本地存储中读取出来，恢复现场。

 

解决过程：
首先得选择合适的客户端存储

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

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

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

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

因为我们是只有在刷新页面时才会丢失store里的数据，那我们可以在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面。

beforeunload这个事件在页面刷新时先触发的。我们把这个事件放在app.vue这个入口组件中，这样就可以保证每次刷新页面都可以触发。

具体的代码如下：

created() {
    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));
    });
  }