vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據的方法
在Vue單頁應用中，如果在某一個具體路由的具體頁面下點擊刷新，那么刷新后，頁面的狀態(tài)信息可能就會丟失掉。這時候應該怎么處理呢？如果你也有這個疑惑，這篇文章或許能夠幫助到你
一、問題
現(xiàn)在產品上有個需求：單頁應用走到某個具體的頁面，然后點擊刷新后，刷新的頁面要與刷新前的頁面要保持一致。
這時候就需要我們保存刷新之前頁面的狀態(tài)。
二、一種解決方案
在這個Vue單頁應用中，王二是用Vuex作為狀態(tài)管理的，一開始王二的思路是將Vuex里的數(shù)據同步更新到localStorage里。
即：一改變vuex里的數(shù)據,便觸發(fā)localStorage.setItem 方法，參考如下代碼：
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
function storeLocalStore (state) {
window.localStorage.setItem("userMsg",JSON.stringify(state));
}
export default new Vuex.Store({
state: {
username: "王二",
schedulename: "標題",
scheduleid: 0,
},
mutations: {
storeUsername (state,name) {
state.username = name
storeLocalStore (state)
},
storeSchedulename (state,name) {
state.schedulename = name
storeLocalStore (state)
},
storeScheduleid (state,id) {
state.scheduleid = Number(id)
storeLocalStore (state)
},
}
})
然后在頁面加載時再從localStorage里將數(shù)據取回來放到vuex里，于是王二在 App.vue 的 created 鉤子函數(shù)里寫下了如下代碼：
localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
//考慮到第一次加載項目時localStorage里沒有userMsg的信息，所以在前面要先做判斷
這樣就能比較圓滿的解決問題了。
三、另一種解決方案
以上的解決方法由于要頻繁地觸發(fā) localStorage.setItem 方法，所以對性能很不友好。而且如果一直同步vuex里的數(shù)據到localStorage里，我們直接用localStorage做狀態(tài)管理好了，似乎也沒有必要再用vuex。
這時候王二想，如果有什么方法能夠監(jiān)聽到頁面的刷新事件，然后在那個監(jiān)聽方法里將Vuex里的數(shù)據儲存到localStorage里，那該多好。
很幸運，還真有這樣的監(jiān)聽事件，我們可以用 beforeunload 來達到以上目的，于是王二在 App.vue 的 created 鉤子函數(shù)里寫下了如下代碼：
//在頁面加載時讀取localStorage里的狀態(tài)信息
localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
//在頁面刷新時將vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
這樣的話，似乎就比較完美了。
2018年03月27日補充：
王二在使用上述方法時，遇到了一個問題，就是：在開發(fā)階段，如果在Vuex里添加新的字段，則新的字段不能被保存到localStorage里，于是上述代碼修改如下：
//在頁面加載時讀取localStorage里的狀態(tài)信息
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
//在頁面刷新時將vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
以上這篇vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中如何實現(xiàn)拖拽調整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue設計一個倒計時秒殺的組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
今天小編就為大家分享一篇vue h5移動端禁止縮放代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)
這篇文章主要介紹了vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)，非常具有實用價值，需要的朋友可以參考下2017-09-09
今天小編就為大家分享一篇解決VUE雙向綁定失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
詳解關于Vue2.0路由開啟keep-alive時需要注意的地方
這篇文章主要介紹了關于Vue2.0路由開啟keep-alive時需要注意的地方,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue 中基于html5 drag drap的拖放效果案例分析
本文通過三個案例給大家介紹了vue 中基于html5 drag drap的拖放效果 ,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細介紹了Vue 2.0雙向綁定原理的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
在Vue項目中,Markdown文檔的使用越來越普遍,因此在Vue中如何進行Markdown文檔展示與解析也成為了一個熱門話題,本文將介紹如何使用Vue實現(xiàn)Markdown文檔的展示和解析,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-01-01
以前我們經常在react中使用jsx，現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關于Vue3使用JSX的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02