欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue頁面刷新vuex中state數(shù)據(jù)丟失的問題

 更新時(shí)間:2022年01月23日 14:17:00   作者:累成一條狗  
這篇文章介紹了解決vue頁面刷新vuex中state數(shù)據(jù)丟失的問題,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

1、localstorage

可以使用 localstorage 來保存信息。

【在某組件中添加如下鉤子函數(shù)。比如 App.vue中】
created() {
    //在頁面加載時(shí)讀取localStorage里的狀態(tài)信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

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


注:
    this.$store.replaceState()  用于替換 store 的信息(狀態(tài)合并)。
    Object.assign(target, ...source)  將source的值 賦給 target,若有重復(fù)的數(shù)據(jù),則覆蓋。其中...表示可以多個(gè)source。
    JSON.stringify()  用于將對(duì)象轉(zhuǎn)為 JSON
    JSON.parse()   用于將 JSON 轉(zhuǎn)為對(duì)象

注意:

若有兩個(gè)組件,當(dāng)調(diào)用 localstorage 的值,可能會(huì)出現(xiàn)問題。

如下圖,Main.vue 中 每次刷新頁面會(huì) 觸發(fā) localstorage 操作。

開始 localstorage 中沒值,某用戶通過 Login.vue 組件 進(jìn)入 Main.vue 組件并刷新頁面后,localStorage 會(huì)記錄當(dāng)前用戶相關(guān)的 state 信息。

直接在瀏覽器中切換路徑到Login.vue。當(dāng)另外一個(gè)用戶通過 Login.vue 并進(jìn)入 Main.vue 時(shí),此時(shí)獲取的就是上一個(gè)用戶的信息,這樣肯定會(huì)出問題(我遇到的一個(gè)坑,大致意思就是這樣)。

一個(gè)暴力的解決思路,在Login.vue中 直接將上一個(gè)用戶緩存的信息給刪除。
此時(shí) localStorage 沒有了上個(gè)用戶的信息。
【Login.vue】
created() {
    // 進(jìn)入畫面前,移除主頁面保存的 state 信息
    localStorage.removeItem("store")
}

然后只在Main組件刷新時(shí) 使用 localStorage 記錄信息。
【Main.vue】
created() {
    //在頁面加載時(shí)讀取localStorage里的狀態(tài)信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

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

2、sessionStorage

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

【在某組件中添加如下鉤子函數(shù)。比如 App.vue中】
created() {
    //在頁面加載時(shí)讀取sessionStorage里的狀態(tài)信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }

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

3、localstorage 與 sessionStorage 的區(qū)別

  • (1)localstorage 與 sessionStorage 都是客戶端用于存儲(chǔ)數(shù)據(jù)的。
  • (2)localStorage是沒有失效時(shí)間的,sessionStorage的聲明周期是瀏覽器的生命周期。
  • (3)當(dāng)瀏覽器關(guān)閉時(shí),sessionStorage的數(shù)據(jù)將清空,而localStorage數(shù)據(jù)只要不通過代碼特意的刪除或手動(dòng)刪除,是永久保存的。
  • (4)若想清除localstorage 的數(shù)據(jù)。
localStorage.removeItem(key)       清除一條數(shù)據(jù)
localStorage.clear()               清除全部的數(shù)據(jù)

 以上所述是小編給大家介紹的解決vue頁面刷新vuex中state數(shù)據(jù)丟失的問題,希望對(duì)大家有所幫助。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 從零開始封裝自己的自定義Vue組件

    從零開始封裝自己的自定義Vue組件

    如何封裝自己的Vue組件,如何把自己的Vue代碼封裝成公共組件,今天為大家簡單介紹一下如何封裝自己的Vue組件
    2018-10-10
  • 詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行

    詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行

    這篇文章主要介紹了詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法

    Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法

    Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫,同時(shí)擁有非常容易上手的API。下面通過本文給大家介紹vue.js ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法,感興趣的朋友一起看看吧
    2016-10-10
  • vue全局自定義指令和局部自定義指令的使用

    vue全局自定義指令和局部自定義指令的使用

    這篇文章主要介紹了vue全局自定義指令和局部自定義指令的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-01-01
  • antd form表單數(shù)據(jù)回顯操作

    antd form表單數(shù)據(jù)回顯操作

    這篇文章主要介紹了antd form表單數(shù)據(jù)回顯操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue.js循環(huán)radio的實(shí)例

    vue.js循環(huán)radio的實(shí)例

    今天小編就為大家分享一篇vue.js循環(huán)radio的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue頭像處理方案小結(jié)

    Vue頭像處理方案小結(jié)

    這篇文章主要介紹了Vue頭像處理方案,實(shí)現(xiàn)思路主要是通過獲取后臺(tái)返回頭像url,判斷圖片寬度,高度。具體實(shí)例代碼大家參考下本文
    2018-07-07
  • Vue axios庫避免重復(fù)發(fā)送請(qǐng)求的示例介紹

    Vue axios庫避免重復(fù)發(fā)送請(qǐng)求的示例介紹

    Axios是一個(gè)基于promise的HTTP庫,可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請(qǐng)求庫之一,我們封裝axios請(qǐng)求也是為了讓代碼看的更加清晰,后期好維護(hù)
    2023-02-02
  • vue.js實(shí)現(xiàn)簡易折疊面板

    vue.js實(shí)現(xiàn)簡易折疊面板

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易折疊面板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題

    Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題

    這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07

最新評(píng)論