解決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-12
這篇文章主要介紹了vue關(guān)于data變量定義的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了在vscode中統(tǒng)一vue編碼風格的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue環(huán)境變量配置之process.env解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue使用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)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語法來創(chuàng)建虛擬DOM,當遇到<,JSX就當HTML解析,遇到{就當JavaScript解析,需要的朋友可以參考下2021-07-07
關(guān)于axios配置請求頭content-type實例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中如何使用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