解決vuex刷新頁面數據丟失

1、前言

vue構建的項目中，vuex的狀態存儲是響應式的，當vue組件從store中讀取狀態的時候，若store中的狀態發生變化，那么相應的組件也會得到高效刷新，問題來了，vuex存儲的數據只是在頁面中，相當於我們定義的全局變量，刷新之后，里面的數據就會恢復到初始化的狀態。比如，用戶已經登錄了，我把登錄狀態放到state中了，一刷新頁面，還要重新登錄？購物車里的添加的數據，一刷新要重新添加？

2、使用場景

vuex存取值一般都是放在computed計算屬性中，但是一刷新頁面的數據就沒了

3、思路

監聽頁面是否刷新，如果頁面刷新了，將state對象存入到sessionStorage/localStorage中。頁面打開之后，判斷sessionStorage/localStorage中是否存在state對象，如果存在，則說明頁面是被刷新過的，將sessionStorage/localStorage中存的數據取出來給vuex中的state賦值。如果不存在，說明是第一次打開，則取vuex中定義的state初始值。

4、代碼實現

    //全局監聽，頁面刷新的時候將store里state的值存到sessionStorage中，然后從sessionStorage中獲取，再賦值給store。然后再把session里面存的刪除即可，相當於中間件的作用。
 //在頁面加載時讀取sessionStorage里的狀態信息
    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));
    });