頁面重新整理後，原有的 x 中的 state 會發生改變，如果在頁面重新整理之前，可以將 state 資訊儲存，頁面重新載入時，再將該值賦給 state，那麼該問題即可解決。

1、localstorage

可以使用 localstorage 來儲存資訊。

【在某元件中新增如下鉤子函式。比如 App.vue中】
created() {
 www.cppcns.com   //在頁面載入時讀取localStorage裡的狀態資訊
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({},this.$store.state,ON.parse(localStorage.getItem("store"))))
    }

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


注：
    this.$store.replaceState()  用於替換 store 的資訊（狀態合併）。
    Object.assign(target,...source)  將source的值 賦給 target，若有重複的資料，則覆蓋。其中...表示可以多個source。
    JSON.stringify()  用於將物件轉為 JSON
    JSON.parse()   用於將 JSON 轉為物件

注意：

若有兩個元件，當呼叫 localstorage 的值，可能會出現問題。

如下圖，Main.vue 中 每次重新整理頁面會 觸發 localstorage 操作。

開始 localstorage 中沒值，某使用者通過 Login.vue 元件 進入 Main.vue 元件並重新整理頁面後，localStorage 會記錄當前使用者相關的 state 資訊。

直接在瀏覽器中切換路徑到Login.vue。當另外一個使用者通過 Login.vue 並進入 Main.vue 時，此時獲取的就是上一個使用者的資訊，這樣肯定會出問題（我遇到的一個坑，大致意思就是這樣）。

一個暴力的解決思路，在Login.vue中 直接將上一個使用者快取的資訊給刪除。
此時 localStorage 沒有了上個使用者的資訊。
【Login.vue】
created() {
    // 進入畫面前，移除主頁面儲存的 state 資訊
    localStorage.removeItem("store")
}

然後只在Main元件重新整理時 使用 localStorage 記錄資訊。
【Main.vue】
created() {
    //在頁面載入時讀取localStorage裡的狀態資訊
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({},JSON.parse(localStorage.getItem("store"))))
    }

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

2、sessionStorage

也可以使用 sessionStorage 來儲存資訊。

【在某元件中新增如下鉤子函式。比如 App.vue中】
created() {
    //在頁面載入時讀取sessionStorage裡的狀態資訊
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceS
 
tate(Object.assign({},this.$storJDFmxuae.state,JSON.parse(sessionStorage.getItem("store"))))
    }

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

3、localstorage 與 sessionStorage 的區別

• （1）localstorage 與 sessionStorage 都是客戶端用於儲存資料的。
• （2）localStorage是沒有失效時間的，sessionStorage的宣告週期是瀏覽器的生命週期。
• （3）當瀏覽器關閉時，sessionStorage的資料將清空，而localStorage資料只要不通過程式碼特意的刪除或手動刪除，是永久儲存的。
• （4）若想清除localstorage 的資料。

localStorage.removeItem(key)       清除一條資料
localStorage.clear()               清除全部的資料

以上所述是小編給大家介紹的解決vue頁面重新整理vuex中state資料丟失的問題，希望對大家有所幫助。在此也非常感謝大家對我們的支援！