技術標籤：VUE的學習vuestorevue.js

背景

登入的時候把使用者資訊儲存到vue.store中，同時頁面上也會顯示使用者名稱等資訊。

問題

當頁面重新整理後，就會發現 使用者名稱 消失了

解決

經過檢查發現是，頁面重新整理後store中資料被清空。

store是用來儲存元件狀態的。重新整理頁面時，vue例項重新載入，store會被重置。所以，一些不應該被重置的資料，應該使用本地儲存來進行儲存。

本地儲存

1. cookie:不適合大量資料的儲存。
2. localStorage:是永久儲存，瀏覽器關閉後資料不會丟失，除非主動刪除資料。當關閉頁面後重新開啟，會讀取上一次開啟的頁面資料。
3. sessionStorage:在瀏覽器當前視窗關閉後自動刪除。

總結：sessionStorage 比較合適儲存使用者資訊，當瀏覽器關閉後，自動清楚資料。

方法：beforeunload

beforeunload會在頁面重新整理時觸發：

只要監聽 beforeunload ，讓頁面在重新整理前將資料存到 sessionStorage 中；

在頁面重新整理後，讀取 sessionStorage 中的資料到 store 中，即可實現store資訊的即時儲存。

app.vue

<!--app.vue-->
<template>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
      }
    },
    created() {
      // 在頁面載入時讀取sessionStorage裡的狀態資訊
      if (sessionStorage.getItem('store')) {
        this.$store.replaceState(
          Object.assign(
            {},
            this.$store.state,
            JSON.parse(sessionStorage.getItem('store'))
          )
        )
        // console.log(JSON.parse(sessionStorage.getItem('store')))  // 列印
      }

      // 在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡
      // beforeunload事件在頁面重新整理時先觸發
      window.addEventListener('beforeunload', () => {
        sessionStorage.setItem('store', JSON.stringify(this.$store.state))
        // console.log(JSON.parse(sessionStorage.getItem('store')))  // 列印
      })
    },
  }
</script>