亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

解決vue頁面刷新,數(shù)據(jù)丟失的問題

 更新時間:2020年11月24日 08:41:54   作者:讓別人少走彎路  
這篇文章主要介紹了解決vue頁面刷新,數(shù)據(jù)丟失的問題,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下

在做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)方式

    這篇文章主要介紹了vue中使用jquery滑動到頁面底部的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue關(guān)于data變量定義的問題

    vue關(guān)于data變量定義的問題

    這篇文章主要介紹了vue關(guān)于data變量定義的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 在vscode中統(tǒng)一vue編碼風格的方法

    在vscode中統(tǒng)一vue編碼風格的方法

    本篇文章主要介紹了在vscode中統(tǒng)一vue編碼風格的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • vue環(huán)境變量配置之process.env解讀

    vue環(huán)境變量配置之process.env解讀

    這篇文章主要介紹了vue環(huán)境變量配置之process.env解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue使用css-rcurlyexpected等less報錯問題

    vue使用css-rcurlyexpected等less報錯問題

    這篇文章主要介紹了vue使用css-rcurlyexpected等less報錯問題,具有很的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 解決vue中el-date-picker?type=daterange日期不回顯的問題

    解決vue中el-date-picker?type=daterange日期不回顯的問題

    這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue中正確使用jsx語法的姿勢分享

    vue中正確使用jsx語法的姿勢分享

    這篇文章主要給大家介紹了關(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實例詳解

    關(guān)于axios配置請求頭content-type實例詳解

    現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • vue?懶加載組件chunk相對路徑混亂問題及解決

    vue?懶加載組件chunk相對路徑混亂問題及解決

    這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue中如何使用echarts和echarts-gl實現(xiàn)3D餅圖環(huán)形餅圖

    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

最新評論