解決vue頁面刷新,數(shù)據(jù)丟失的問題
在做vue項目的過程中有時候會遇到一個問題,就是進行F5頁面刷新的時候,頁面的數(shù)據(jù)會丟失,出現(xiàn)這個問題的原因是因為當用vuex做全局狀態(tài)管理的時候,store中的數(shù)據(jù)是保存在運行內(nèi)存中的,頁面刷新時會重新加載vue實例,store中的數(shù)據(jù)就會被重新賦值,因此數(shù)據(jù)就丟失了,解決方式如下:
解決方法一:
最先想到的應(yīng)該就是利用localStorage/sessionStorage將數(shù)據(jù)儲存在外部,做一個持久化儲存,下面是利用localStorage存儲的具體方案:
方案一:由于state中的數(shù)據(jù)是響應(yīng)式的,而數(shù)據(jù)又是通過mutation來進行修改,故在通過mutation修改state中數(shù)據(jù)的同時調(diào)用localStorage.setItem()方法來進行數(shù)據(jù)的存儲。
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { orderList: [], menuList: [] }, mutations: { orderList(s, d) { s.orderList= d; window.localStorage.setItem("list",JSON.stringify(s.orderList)) }, menuList(s, d) { s.menuList = d; window.localStorage.setItem("list",JSON.stringify(s.menuList)) }, } })
在頁面加載的時候再通過localStorage.getItem()將數(shù)據(jù)取出放回到vuex,可在app.vue的created()周期函數(shù)中寫如下代碼:
if (window.localStorage.getItem("list") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list")))) }
方案二:方案一能夠順利解決問題,但不斷觸發(fā)localStorage.setItem()方法對性能不是特別友好,而且一直將數(shù)據(jù)同步到localStorage中似乎就沒必要再用vuex做狀態(tài)管理,直接用localStorage即可,于是對以上解決方法進行了改進,通過監(jiān)聽beforeunload事件來進行數(shù)據(jù)的localStorage存儲,beforeunload事件在頁面刷新時進行觸發(fā),具體做法是在App.vue的created()周期函數(shù)中下如下代碼:
if (window.localStorage.getItem("list") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list")))) } window.addEventListener("beforeunload",()=>{ window.localStorage.setItem("list",JSON.stringify(this.$store.state)) })
解決方法二(推薦):
這個方法是基于對computed計算屬性的理解,在vue的官方文檔中有這么一段話:
由此得知計算屬性的結(jié)果會被緩存,也就是說在有緩存的情況下,computed會優(yōu)先使用緩存,于是也可以在state數(shù)據(jù)相對應(yīng)的頁面這樣寫:
computed:{ orderList() { return this.$store.state.orderList } }
以上就是解決vue頁面刷新,數(shù)據(jù)丟失的問題的詳細內(nèi)容,更多關(guān)于vue頁面刷新,數(shù)據(jù)丟失的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue中使用jquery滑動到頁面底部的實現(xiàn)方式
這篇文章主要介紹了vue中使用jquery滑動到頁面底部的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12vue使用css-rcurlyexpected等less報錯問題
這篇文章主要介紹了vue使用css-rcurlyexpected等less報錯問題,具有很的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10解決vue中el-date-picker?type=daterange日期不回顯的問題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10關(guān)于axios配置請求頭content-type實例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04vue中如何使用echarts和echarts-gl實現(xiàn)3D餅圖環(huán)形餅圖
現(xiàn)在vue是很多公司前端的主流框架,我目前所在公司接觸的項目也都是使用vue來實現(xiàn)的,很少有完全使用原生的JavaScript來寫項目的了,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts和echarts-gl實現(xiàn)3D餅圖環(huán)形餅圖的相關(guān)資料,需要的朋友可以參考下2023-03-03