日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 Vue 正文

解決vue頁面刷新vuex中state數據丟失的問題_vue.js

作者：累成一條狗 ? 更新時間： 2022-04-05 Vue

頁面刷新后，原有的 vuex 中的 state 會發生改變，如果在頁面刷新之前，可以將 state 信息保存，頁面重新加載時，再將該值賦給 state，那么該問題即可解決。

1、localstorage

可以使用 localstorage 來保存信息。

【在某組件中添加如下鉤子函數。比如 App.vue中】
created() {
    //在頁面加載時讀取localStorage里的狀態信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.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({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

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

2、sessionStorage

也可以使用 sessionStorage 來保存信息。

【在某組件中添加如下鉤子函數。比如 App.vue中】
created() {
    //在頁面加載時讀取sessionStorage里的狀態信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.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()               清除全部的數據

原文鏈接：https://www.cnblogs.com/l-y-h/p/11722007.html

欄目分類
最近更新