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

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

vuex狀態(tài)在頁面刷新時,會清空狀態(tài)的解決

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

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

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

app.vue

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

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

您可能感興趣的文章: