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

2022-04-01 02:17:15 字數 989 閱讀 2817

vue構建的專案中,vuex的狀態儲存是響應式的,當vue元件從store中讀取狀態的時候,若store中的狀態發生變化,那麼相應的元件也會得到高效重新整理,問題來了,vuex儲存的資料只是在頁面中,相當於我們定義的全域性變數,重新整理之後,裡面的資料就會恢復到初始化的狀態。比如,使用者已經登入了,我把登入狀態放到state中了,一重新整理頁面,還要重新登入?購物車裡的新增的資料,一重新整理要重新新增?

vuex訪問值一般都是放在computed計算屬性中,但是一重新整理頁面的資料就沒了

監聽頁面是否重新整理,如果頁面重新整理了,將state物件存入到sessionstorage/localstorage中。頁面開啟之後,判斷sessionstorage/localstorage中是否存在state物件,如果存在,則說明頁面是被重新整理過的,將sessionstorage/localstorage中存的資料取出來給vuex中的state賦值。如果不存在,說明是第一次開啟,則取vuex中定義的state初始值。

//全域性監聽,頁面重新整理的時候將store裡state的值存到sessionstorage中,然後從sessionstorage中獲取,再賦值給store。然後再把session裡面存的刪除即可,相當於中介軟體的作用。

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

if (sessionstorage.getitem("store")) ,

this.$store.state,

json.parse(sessionstorage.getitem("store"))));

sessionstorage.removeitem("store")

}//在頁面重新整理時將vuex裡的資訊儲存到sessionstorage裡

window.addeventlistener("beforeunload", () => );

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

1 前言 vue構建的專案中,vuex的狀態儲存是響應式的,當vue元件從store中讀取狀態的時候,若store中的狀態發生變化,那麼相應的元件也會得到高效重新整理,問題來了,vuex儲存的資料只是在頁面中,相當於我們定義的全域性變數,重新整理之後,裡面的資料就會恢復到初始化的狀態。比如,使用者已...

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

vue將資料存入vuex裡面,在進行頁面重新整理的時候,資料丟失,這裡有兩個解決辦法應對不同場景 假如你的路由跳了3層以上,而且這幾個頁面都要用同乙個資料roomid,肯定想到路由傳參的方式傳roomid,那麼問題來了 解決方法 初始化得到roomid後,存入sessionstorge vuex裡面...

解決vuex存放資料後重新整理頁面資料丟失問題

cookie 不適合儲存大量的資料。localstorage 是永久儲存,瀏覽器關閉後資料不會丟失,除非主動刪除資料。當關閉頁面後重新開啟,會讀取上一次開啟的頁面資料。sessionstorage 在當前瀏覽器視窗關閉後自動刪除。所以,sessionstorage 最合適。監聽 beforeunlo...