最近在用vue来做H5项目，在之前的项目中就遇到了页面刷新，导致store数据丢失，页面数据加载失败的问题。经过不懈查找，最终找到了解决办法:
思路： 将store的数据存储在storage里，由于vue多为单页面应用，且每次重新打开页面需要保持数据为空 所以这里我们不选用localstorage，
window.addEventListener有一个方法可以监听页面刷新"beforeunload"，
但是我们又不能在每一个页面都写这个方法 故 我把他写在了app.vue中
方法如下
<template>
<div id="app" class="body">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
created() {
//在页面加载时读取sessionStorage里的状态信息
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))
})
}
}
</script>
因为项目是部署在微信公众号中，无法避免的遇到了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销毁重建后再赋值回去。
网友评论