1凯傲、通過本地存儲 state中的數(shù)據(jù)骂维，頁面刷新成功后再次從本地存儲中讀取state數(shù)據(jù)
// vuex中的數(shù)據(jù)發(fā)生改變時觸發(fā)localStorage的存儲操作
localstorage.setItem('state', JSON.stringify(this.$store.state))
// 頁面加載的時候在created中獲取本地存儲中的數(shù)據(jù)
localStorage.getItem('state') && this.$store.replaceState(JSON.parse(localStorage.getItem('state')));
注意：該操作會頻繁的觸發(fā)localStorage的存取工作
2楚殿、 監(jiān)聽頁面刷新侠畔，觸發(fā)存取操作
首先在入口組件App.vue中的created中利用localstorage或者sessionStorage來存取state中的數(shù)據(jù)
// 在頁面加載時讀取sessionStorage里的狀態(tài)信息
if ( sessionStorage.getItem('state') ) {
this.$store.replaceState( Object.assign( {}, this.$store.state,
JSON.parse(sessionStorage.getItem('state') ) ) )
}
// 頁面刷新時將state數(shù)據(jù)存儲到sessionStorage中
window.addEventListener('beforeunload',()=>{
sessionStorage.setItem('state',JSON.stringify(this.$store.state) )
})
注意：Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象结缚。它將返回目標(biāo)對象
vuex狀態(tài)保留
到這里，我們在PC端软棺、安卓端红竭、mac端safair瀏覽器中均能正常訪問，但是在ios端的safair瀏覽器中存在問題喘落，頁面刷新后拿不到數(shù)據(jù)茵宪。
原因：在ios端beforeunload方法未執(zhí)行，造成state數(shù)據(jù)未存儲到本地瘦棋，通過查詢ios官方文檔眉厨，文檔中說unload和beforeunload已經(jīng)廢棄，使用pagehide作為代替
window.addEventListener('pagehide', () => {
sessionStorage.setItem('state', JSON.stringify(this.$store.state))
})
這樣一番改動后兽狭，果然在PC端憾股、安卓端、ios端均未出現(xiàn)問題
// 會話歷史事件
pageshow事件：在用戶訪問頁面時觸發(fā)箕慧；pageshow 事件類似于 onload 事件服球，onload 事件在頁面第一次加載時觸發(fā)， pageshow 事件在每次加載頁面時觸發(fā)颠焦，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發(fā)斩熊。
pagehide事件：在用戶離開當(dāng)前網(wǎng)頁時觸發(fā)；pagehide 事件有時可以替代 unload事件伐庭，但 unload 事件觸發(fā)后無法緩存頁面粉渠。
