解決思路

通過監聽頁面重新整理或者關閉來將vuex裡面的資料儲存到sessionStorage裡，在頁面載入時讀取sessionStorage裡的狀態資訊，更新vuex的資料。

created () {
      //在頁面載入時讀取sessionStorage裡的狀態資訊
      if (sessionStorage.getItem("store") ) {
          this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
      }
      
 
//在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡
      // window.addEventListener("beforeunload",()=>{    // 修改之前監聽beforeunload方法
      window.addEventListener("pagehide",()=>{
          sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })
    },

將beforeunload 替換成pagehide 就能解決這個問題

補充說明

1、pageshow事件：這個事件在使用者瀏覽網頁時觸發，pageshow 事件類似於 onload 事件，onload 事件在頁面第一次載入時觸發， pageshow 事件在每次載入頁面時觸發，即 onload 事件在頁面從瀏覽器快取中讀取時不觸發。
2、pagehide事件：該事件會在使用者離開網頁時觸發。離開網頁有多種方式。如點選一個連結，重新整理頁面，提交表單，關閉瀏覽器等。pagehide 事件有時可以替代 unload事件，但 unload 事件觸發後無法快取頁面。

參考跳轉寫在自己部落格只是為了方便自己瀏覽