前端 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));
    });
  }