vue單頁應用在頁面重新整理時保留狀態資料的方法
在Vue單頁應用中,如果在某一個具體路由的具體頁面下點選重新整理,那麼重新整理後,頁面的狀態資訊可能就會丟失掉。這時候應該怎麼處理呢?如果你也有這個疑惑,這篇文章或許能夠幫助到你
一、問題
現在產品上有個需求:單頁應用走到某個具體的頁面,然後點選重新整理後,重新整理的頁面要與重新整理前的頁面要保持一致。
這時候就需要我們儲存重新整理之前頁面的狀態。
二、一種解決方案
在這個Vue單頁應用中,王二是用Vuex作為狀態管理的,一開始王二的思路是將Vuex裡的資料同步更新到localStorage裡。
即:一改變vuex裡的資料,便觸發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裡將資料取回來放到vuex裡,於是王二在 App.vue 的 created 鉤子函式裡寫下了如下程式碼:
localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg"))); //考慮到第一次載入專案時localStorage裡沒有userMsg的資訊,所以在前面要先做判斷
這樣就能比較圓滿的解決問題了。
三、另一種解決方案
以上的解決方法由於要頻繁地觸發 localStorage.setItem 方法,所以對效能很不友好。而且如果一直同步vuex裡的資料到localStorage裡,我們直接用localStorage做狀態管理好了,似乎也沒有必要再用vuex。
這時候王二想,如果有什麼方法能夠監聽到頁面的重新整理事件,然後在那個監聽方法裡將Vuex裡的資料儲存到localStorage裡,那該多好。
很幸運,還真有這樣的監聽事件,我們可以用 beforeunload 來達到以上目的,於是王二在 App.vue 的 created 鉤子函式裡寫下了如下程式碼:
//在頁面載入時讀取localStorage裡的狀態資訊 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日補充:
王二在使用上述方法時,遇到了一個問題,就是:在開發階段,如果在Vuex裡新增新的欄位,則新的欄位不能被儲存到localStorage裡,於是上述程式碼修改如下:
//在頁面載入時讀取localStorage裡的狀態資訊 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)) })
原文連結:https://blog.csdn.net/aliven1/article/details/80743470