快捷導(dǎo)航

關(guān)于vuex狀態(tài)刷新網(wǎng)頁(yè)時(shí)數(shù)據(jù)被清空問題及解決

更新時(shí)間：2022年07月27日 15:13:06 作者：不過期的約定

這篇文章主要介紹了關(guān)于vuex狀態(tài)刷新網(wǎng)頁(yè)時(shí)數(shù)據(jù)被清空問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vuex狀態(tài)刷新網(wǎng)頁(yè)時(shí)數(shù)據(jù)被清空問題

vuex狀態(tài)管理，在網(wǎng)頁(yè)刷新數(shù)據(jù)被清空的解決方法。

在main.js中寫入下面的代碼段（親測(cè)有效）

//刷新保存狀態(tài)
if (sessionStorage.getItem("store")) {
    store.replaceState(
        Object.assign(
            {},
            store.state,
            JSON.parse(sessionStorage.getItem("store"))
        )
    );
    sessionStorage.removeItem("store")
}

//監(jiān)聽，在頁(yè)面刷新時(shí)將vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
    sessionStorage.setItem("store", JSON.stringify(store.state));
});

vuex狀態(tài)在頁(yè)面刷新時(shí),會(huì)清空狀態(tài)的解決

store寫入的state在頁(yè)面刷新時(shí)會(huì)被清空，這時(shí)可以用sessionStorage緩存狀態(tài)。因?yàn)閘ocalStorage會(huì)永久保存數(shù)據(jù)，只有用戶手動(dòng)清除的時(shí)候才會(huì)清除。cookie存儲(chǔ)內(nèi)存只有4k,并且始終在同源的http請(qǐng)求中攜帶。而sessionStorage在關(guān)閉瀏覽器頁(yè)面時(shí)就會(huì)清空。

因?yàn)闋顟B(tài)只會(huì)在刷新頁(yè)面的時(shí)候清空，所以我們只需要去app.vue里面在頁(yè)面刷新之前把store保存在sessionStorage里面。在頁(yè)面加載時(shí)讀取sessionStorage的值

由于瀏覽器存儲(chǔ)時(shí)會(huì)自動(dòng)把對(duì)象轉(zhuǎn)換成字符串格式，且不具備轉(zhuǎn)換對(duì)象的鍵和值為字符串的效果，只會(huì)轉(zhuǎn)換為[object,object]。因此需要先將對(duì)象轉(zhuǎn)換為json字符串存儲(chǔ)，取出時(shí)再使用JSON.parse()方法轉(zhuǎn)換為json對(duì)象。

app.vue

created () {
? ? // 在頁(yè)面加載時(shí)讀取sessionStorage
? ? if (sessionStorage.getItem('store')) {
? ? ? this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
? ? }
? ? // 在頁(yè)面刷新時(shí)將store保存到sessionStorage里
? ? window.addEventListener('beforeunload', () => {
? ? ? sessionStorage.setItem('store', JSON.stringify(this.$store.state))
? ? })
? }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: