前言

我們在使用Vue框架時，常常會引入Vuex作為跨元件資料與狀態管理工具。
由於Vuex的資料是儲存在記憶體中的，那麼當瀏覽器重新整理時，Vue例項會重新載入，原本存在的Vuex資料將會丟失。這其中可能包含一些必要的認證資訊，使得站點需要重新登入，影響使用者體驗。

使用sessionStorage解決

sessionStorage是window物件屬性，允許在瀏覽器中儲存 key/value 對的資料。sessionStorage 用於臨時儲存同一視窗(或標籤頁)的資料，在頁面重新整理時資料不會刪除，但在關閉視窗或標籤頁將會刪除這些資料。

提示: 如果想在瀏覽器視窗關閉後還保留資料，可以使用 localStorage 屬性， 該資料物件沒有過期時間，除非使用者手動去刪除。

sessionStorage常用方法

setItem()

setItem(key, value)方法將key=value這個鍵值對儲存於瀏覽器中。
舉例：sessionStorage.setItem("name", "zimskyzeng")

getItem()

getItem(key)方法從瀏覽器中將鍵為key的值取出。
舉例：console.log(sessionStorage.getItem("name"))

removeItem()

removeItem(key)方法從瀏覽器中將鍵為key的值刪除。
舉例：sessionStorage.removeItem("namne")

clear()

clear()方法將瀏覽器中儲存的所有鍵值對刪除。
舉例：sessionStorage.clear()

快取Vuex配置

App.vue中配置

App.vue是元件樹的頂端，在這裡配置恢復與快取策略可以對所有頁面生效。
由於已經在Vue的虛擬DOM中，這裡採用原生的Vuex引入方式。

created() {
      // 先檢查sessionStorage中是否有資料，若存在資料則載入到vuex
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(
          Object.assign(
            {},
            this.$store.state,
            JSON.parse(sessionStorage.getItem("store"))
          )
        );
        sessionStorage.removeItem("store")
      }

      //在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("store", JSON.stringify(this.$store.state));
      });
    }
 

額外配置

這裡的額外配置主要是為了解決某些自定義鑑權的場景，由於路由的router.beforeEach()是優先於虛擬DOM處理的，因此若我們在main.js檔案中引入了自定義的鑑權js配置(其中包含了beforeEach處理)，那麼我們同樣需要在自定義鑑權中做相同處理。
需要注意的是，在這裡引入Vuex的方式為import store from '../store'。

// 進入路由鑑權前，將快取的sessionStore資訊寫入store
if (sessionStorage.getItem("store")) {
  store.replaceState(
    Object.assign(
      {},
      store.state,
      JSON.parse(sessionStorage.getItem("store"))
    )
  );
  sessionStorage.removeItem("store")
}