vuex实例方法replaceState解决vuex页面刷新数据丢失问题

一，概述

在我们使用vuex的时候，常常遇到的问题就是，在页面刷新之后，vuex中的数据丢失。但其实这不是数据丢失，实际上是vuex重新创建实例，把数据初始化了。
为了避免这种情况，需要将vuex数据持久化。

二，store.replaceState实现vuex数据持久化

实现vuex的数据持久化，可以重新发请求获取数据，也可以使用插件，还可以利用浏览器本地存储。但归根到底，就是让vuex重新初始化之后，再次拥有数据。
于是，就可以灵活地选择这三种方案，这里我就写store.replaceState结合浏览器地sessionStorage实现vuex地数据持久化。
原理：

利用 pagehide 事件在用户刷新页面前将vuex的store存入sessionstorage中，然后在刷新后页面加载时，从sessionstorage中重新获取

// 在页面加载时读取sessionStorage里的状态信息
let storeCurrent = window.sessionStorage.getItem('store');
if (storeCurrent !== null) {
  store.replaceState(Object.assign({}, store.state, JSON.parse(storeCurrent)));
  sessionStorage.removeItem('store');
}
// // pagehide 解决ios移动端不支持beforeunload,安卓端两个都可以用
// // 在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('pagehide', () => {
  sessionStorage.setItem('store', JSON.stringify(store.state));
});