store頁面重新整理資料被重置及解決方法

2021-10-08 02:51:56 字數 1059 閱讀 3288

所謂單頁應用,就是在不重新整理瀏覽器的情況下可以在整個網頁應用實時共享資料。

store是記憶體機制,不是快取機制,頁面重新整理和關閉都會導致store初始化,store裡面一般儲存什麼資料呢?

1、元件的初始狀態;

2、後端資料的初始狀態;

如果你需要儲存是資料是要實時儲存並且讀取顯示出來,那麼存在本地快取或者服務端,這樣每次重新整理頁面都需要讀取本地快取或者服務端的api,然後儲存到store,再從store去讀到元件上。

解決vue重新整理頁面以後丟失store的資料

export

default

,this

.$store.state,

json

.parse

(sessionstorage.

getitem

('store'))

))}// 在頁面重新整理時將store儲存到sessionstorage裡

window.

addeventlistener

('beforeunload',(

)=>)}

}

第二種方法利用localstorage

//在頁面載入時讀取localstorage裡的狀態資訊

localstorage.

getitem

("usermsg")&&

this

.$store.

replacestate

(object.

assign

(this

.$store.state,

json

.parse

(localstorage.

getitem

("usermsg"))

));//在頁面重新整理時將vuex裡的資訊儲存到localstorage裡

window.

addeventlistener

("beforeunload",(

)=>

)

JS監聽頁面重新整理及阻止頁面重新整理

有時前端請求後端 需要等待,但使用者不想等待使用重新整理,這樣會造成一些錯誤的資料等。當然服務端應該可以控制,不過這裡說一些前端的控制思路 僅個人想法 說一下2個思路 1 可以在介面發出去之後,阻止所有重新整理頁面的行為進行阻止,並給出提示。基本就是通過鍵盤和滑鼠事件 2 監聽頁面的重新整理行為 b...

頁面重新整理 重新整理vue頁面,解決資料丟失

解決方法一 最先想到的應該就是利用localstorage sessionstorage將資料儲存在外部,做乙個持久化儲存,下面是利用localstorage儲存的具體方案 方案一 由於state中的資料是響應式的,而資料又是通過mutation來進行修改,故在通過mutation修改state中資...

jquery重新整理頁面(區域性及全頁面重新整理)

區域性重新整理 這個方法就多了去了,常見的有以下幾種 get方法,post方法,getjson方法,ajax方法如下 前兩種使用方法基本上一樣 get default.php function data getscript方法 getscript function 1000 animate 1000...