vuex 页面刷新时store数据丢失问题

最近在用vue来做H5项目，在之前的项目中就遇到了页面刷新，导致store数据丢失，页面数据加载失败的问题。经过不懈查找，最终找到了解决办法:

思路： 将store的数据存储在storage里，由于vue多为单页面应用，且每次重新打开页面需要保持数据为空 所以这里我们不选用localstorage，

window.addEventListener有一个方法可以监听页面刷新"beforeunload"，

但是我们又不能在每一个页面都写这个方法 故 我把他写在了app.vue中

方法如下

因为项目是部署在微信公众号中，无法避免的遇到了IOS系统，在IOS的微信浏览器中发现这段代码并不生效，首先打log确认方法是否执行，验证之后发现 beforeunload 这个方法并不兼容IOS浏览器，详情参考MDN
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

image.png

原因是 已经在IOS中被废弃了。
在网上查找一番后 发现了替代方法 pagehide ，同参考MDN：
https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

但是将代码更改之后发现依然无效，再次寻找原因发现，在IOS中 sessionStorage 是无法被存储的 ，所以无奈，我们只能选择使用 localStorage 但是这就出现了更严重的问题 数据不会在你离开页面后清空 如果你有接口使用store的数据获取信息 那么就会出现信息错乱的问题，为了防止这种事情发生，我们在注销界面和登录界面增加remove store 以保证每次用户登录后的数据都是重新获取到的。
经过兼容 代码如下：

// 兼容iOS端微信无法存取sessionStorage的问题
      // 在页面加载时读取localStorage里的状态信息
      if (localStorage.getItem('store')) {
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem('store'))));
      }
      // 在页面刷新时将vuex里的信息保存到localStorage里
      window.addEventListener('pagehide', () => {
        localStorage.setItem('store', JSON.stringify(this.$store.state));
      });

      // 在登录和注销界面增加
      localStorage.removeItem('store');

---

感谢一下四楼提供的另一种方法，测试后是可用的，如果有兴趣可以一试。
npm vuex-persist 地址
但是解决问题的方法在本质上是相同的，都是先存入storage中，当vuex销毁重建后再赋值回去。