1、前言

vue構(gòu)建的項(xiàng)目中，vuex的狀態(tài)存儲(chǔ)是響應(yīng)式的，當(dāng)vue組件從store中讀取狀態(tài)的時(shí)候，若store中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)得到高效刷新，問題來了，vuex存儲(chǔ)的數(shù)據(jù)只是在頁面中，相當(dāng)于我們定義的全局變量，刷新之后，里面的數(shù)據(jù)就會(huì)恢復(fù)到初始化的狀態(tài)。比如，用戶已經(jīng)登錄了，我把登錄狀態(tài)放到state中了，一刷新頁面，還要重新登錄？購物車?yán)锏奶砑拥臄?shù)據(jù)，一刷新要重新添加？

2、使用場景

image

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

3、思路

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

4、代碼實(shí)現(xiàn)

    //全局監(jiān)聽，頁面刷新的時(shí)候?qū)tore里state的值存到sessionStorage中，然后從sessionStorage中獲取，再賦值給store。然后再把session里面存的刪除即可，相當(dāng)于中間件的作用。
 //在頁面加載時(shí)讀取sessionStorage里的狀態(tài)信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
      sessionStorage.removeItem("store")
    }

    //在頁面刷新時(shí)將vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });

5、插件實(shí)現(xiàn)

vuex持久化 vuex-persistedstate