最近在用vue來做H5項(xiàng)目薇组，在之前的項(xiàng)目中就遇到了頁面刷新肿仑，導(dǎo)致store數(shù)據(jù)丟失序目，頁面數(shù)據(jù)加載失敗的問題。經(jīng)過不懈查找岩梳，最終找到了解決辦法:
思路： 將store的數(shù)據(jù)存儲在storage里囊骤，由于vue多為單頁面應(yīng)用晃择，且每次重新打開頁面需要保持?jǐn)?shù)據(jù)為空 所以這里我們不選用localstorage，
window.addEventListener有一個(gè)方法可以監(jiān)聽頁面刷新"beforeunload"也物，
但是我們又不能在每一個(gè)頁面都寫這個(gè)方法 故 我把他寫在了app.vue中
方法如下
<template>
<div id="app" class="body">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
created() {
//在頁面加載時(shí)讀取sessionStorage里的狀態(tài)信息
if (sessionStorage.getItem("store")) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
}
//在頁面刷新時(shí)將vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state))
})
}
}
</script>
因?yàn)轫?xiàng)目是部署在微信公眾號中，無法避免的遇到了IOS系統(tǒng)滑蚯，在IOS的微信瀏覽器中發(fā)現(xiàn)這段代碼并不生效浪蹂，首先打log確認(rèn)方法是否執(zhí)行，驗(yàn)證之后發(fā)現(xiàn) beforeunload 這個(gè)方法并不兼容IOS瀏覽器告材，詳情參考MDN
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
原因是 已經(jīng)在IOS中被廢棄了坤次。
在網(wǎng)上查找一番后 發(fā)現(xiàn)了替代方法 pagehide ，同參考MDN：
https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
但是將代碼更改之后發(fā)現(xiàn)依然無效斥赋，再次尋找原因發(fā)現(xiàn)缰猴，在IOS中 sessionStorage 是無法被存儲的 ，所以無奈疤剑，我們只能選擇使用 localStorage 但是這就出現(xiàn)了更嚴(yán)重的問題 數(shù)據(jù)不會在你離開頁面后清空 如果你有接口使用store的數(shù)據(jù)獲取信息 那么就會出現(xiàn)信息錯(cuò)亂的問題滑绒，為了防止這種事情發(fā)生，我們在注銷界面和登錄界面增加remove store 以保證每次用戶登錄后的數(shù)據(jù)都是重新獲取到的隘膘。
經(jīng)過兼容 代碼如下：
// 兼容iOS端微信無法存取sessionStorage的問題
// 在頁面加載時(shí)讀取localStorage里的狀態(tài)信息
if (localStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem('store'))));
}
// 在頁面刷新時(shí)將vuex里的信息保存到localStorage里
window.addEventListener('pagehide', () => {
localStorage.setItem('store', JSON.stringify(this.$store.state));
});
// 在登錄和注銷界面增加
localStorage.removeItem('store');
感謝一下四樓提供的另一種方法疑故，測試后是可用的，如果有興趣可以一試弯菊。
npm vuex-persist 地址
但是解決問題的方法在本質(zhì)上是相同的纵势，都是先存入storage中，當(dāng)vuex銷毀重建后再賦值回去误续。
