一、store數據丟失
系統(tǒng)登錄后獲取到系統(tǒng)菜單列表存入store中，發(fā)現在刷新頁面之后，store中的菜單數據丟失了秘豹。
console打印數據
刷新頁面之前
刷新頁面之后
二、原因
刷新頁面時昌粤，vue實例重新加載既绕，從而啄刹，store也被重置了。store是用來存儲組件狀態(tài)的凄贩，而不是用來做本地數據存儲的誓军。所以，對于不希望頁面刷新之后被重置的數據疲扎，使用本地存儲來進行存儲昵时。
三、本地存儲
**cookie: **不適合存儲大量的數據椒丧。
localStorage: 是永久存儲壹甥，瀏覽器關閉后數據不會丟失，除非主動刪除數據壶熏。當關閉頁面后重新打開盹廷，會讀取上一次打開的頁面數據。
sessionStorage: 在當前瀏覽器窗口關閉后自動刪除久橙。所以，sessionStorage 最合適管怠。
四淆衷、解決方法
監(jiān)聽 beforeunload 這個方法，beforeunload 在頁面刷新時觸發(fā)渤弛，監(jiān)聽 beforeunload 讓頁面在刷新前將數據存到 sessionStorage 中祝拯。然后，在頁面刷新時她肯，讀取 sessionStorage 中的數據到 store 中佳头。
代碼如下：
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
// 入口組件
export default {
name: 'App',
created() {
// 在頁面加載時讀取sessionStorage里的狀態(tài)信息
if (sessionStorage.getItem('store')) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem('store'))
)
)
}
// 在頁面刷新時將vuex里的信息保存到sessionStorage里
// beforeunload事件在頁面刷新時先觸發(fā)
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
},
}
</script>
文章每周持續(xù)更新，可以微信搜索「 前端大集錦 」第一時間閱讀晴氨，回復【視頻】【書籍】領取200G視頻資料和30本PDF書籍資料
