解決vue頁面刷新vuex中state數(shù)據(jù)丟失的問題
頁面刷新后,原有的 vuex 中的 state 會發(fā)生改變,如果在頁面刷新之前,可以將 state 信息保存,頁面重新加載時,再將該值賦給 state,那么該問題即可解決。
1、localstorage
可以使用 localstorage 來保存信息。
【在某組件中添加如下鉤子函數(shù)。比如 App.vue中】 created() { //在頁面加載時讀取localStorage里的狀態(tài)信息 if (localStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store")))) } //在頁面刷新時將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,若有重復的數(shù)據(jù),則覆蓋。其中...表示可以多個source。 JSON.stringify() 用于將對象轉(zhuǎn)為 JSON JSON.parse() 用于將 JSON 轉(zhuǎn)為對象
注意:
若有兩個組件,當調(diào)用 localstorage 的值,可能會出現(xiàn)問題。
如下圖,Main.vue 中 每次刷新頁面會 觸發(fā) localstorage 操作。
開始 localstorage 中沒值,某用戶通過 Login.vue 組件 進入 Main.vue 組件并刷新頁面后,localStorage 會記錄當前用戶相關(guān)的 state 信息。
直接在瀏覽器中切換路徑到Login.vue。當另外一個用戶通過 Login.vue 并進入 Main.vue 時,此時獲取的就是上一個用戶的信息,這樣肯定會出問題(我遇到的一個坑,大致意思就是這樣)。
一個暴力的解決思路,在Login.vue中 直接將上一個用戶緩存的信息給刪除。 此時 localStorage 沒有了上個用戶的信息。 【Login.vue】 created() { // 進入畫面前,移除主頁面保存的 state 信息 localStorage.removeItem("store") } 然后只在Main組件刷新時 使用 localStorage 記錄信息。 【Main.vue】 created() { //在頁面加載時讀取localStorage里的狀態(tài)信息 if (localStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store")))) } //在頁面刷新時將vuex里的信息保存到localStorage里 window.addEventListener("beforeunload",()=>{ localStorage.setItem("store",JSON.stringify(this.$store.state)) }) }
2、sessionStorage
也可以使用 sessionStorage 來保存信息。
【在某組件中添加如下鉤子函數(shù)。比如 App.vue中】 created() { //在頁面加載時讀取sessionStorage里的狀態(tài)信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在頁面刷新時將vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload",()=>{ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) }) }
3、localstorage 與 sessionStorage 的區(qū)別
- (1)localstorage 與 sessionStorage 都是客戶端用于存儲數(shù)據(jù)的。
- (2)localStorage是沒有失效時間的,sessionStorage的聲明周期是瀏覽器的生命周期。
- (3)當瀏覽器關(guān)閉時,sessionStorage的數(shù)據(jù)將清空,而localStorage數(shù)據(jù)只要不通過代碼特意的刪除或手動刪除,是永久保存的。
- (4)若想清除localstorage 的數(shù)據(jù)。
localStorage.removeItem(key) 清除一條數(shù)據(jù) localStorage.clear() 清除全部的數(shù)據(jù)
以上所述是小編給大家介紹的解決vue頁面刷新vuex中state數(shù)據(jù)丟失的問題,希望對大家有所幫助。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行
這篇文章主要介紹了詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09Vue.js Ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法
Vue.js是一個輕巧、高性能、可組件化的MVVM庫,同時擁有非常容易上手的API。下面通過本文給大家介紹vue.js ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法,感興趣的朋友一起看看吧2016-10-10Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07