一、store數(shù)據(jù)丟失

系統(tǒng)登錄后獲取到系統(tǒng)菜單列表存入store中，發(fā)現(xiàn)在刷新頁面之后，store中的菜單數(shù)據(jù)丟失了。

console打印數(shù)據(jù)

刷新頁面之前

刷新頁面之后

二、原因

刷新頁面時，vue實例重新加載，從而，store也被重置了。store是用來存儲組件狀態(tài)的，而不是用來做本地數(shù)據(jù)存儲的。所以，對于不希望頁面刷新之后被重置的數(shù)據(jù)，使用本地存儲來進行存儲。

三、本地存儲

**cookie: **不適合存儲大量的數(shù)據(jù)。

localStorage: 是永久存儲，瀏覽器關(guān)閉后數(shù)據(jù)不會丟失，除非主動刪除數(shù)據(jù)。當關(guān)閉頁面后重新打開，會讀取上一次打開的頁面數(shù)據(jù)。

sessionStorage: 在當前瀏覽器窗口關(guān)閉后自動刪除。所以，sessionStorage 最合適。

四、解決方法

監(jiān)聽 beforeunload 這個方法，beforeunload 在頁面刷新時觸發(fā)，監(jiān)聽 beforeunload 讓頁面在刷新前將數(shù)據(jù)存到 sessionStorage 中。然后，在頁面刷新時，讀取 sessionStorage 中的數(shù)據(jù)到 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ù)更新，可以微信搜索「 前端大集錦 」第一時間閱讀，回復【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料