vue常見問題處理 -- 頁面刷新時,如何保持原有vuex中的state信息

来源:https://www.cnblogs.com/l-y-h/archive/2019/10/22/11722007.html
-Advertisement-
Play Games

一、頁面刷新時,如何保持原有vuex中的state信息 頁面刷新後,原有的 vuex 中的 state 會發生改變,如果在頁面刷新之前,可以將 state 信息保存,頁面重新載入時,再將該值賦給 state,那麼該問題即可解決。 1、localstorage 可以使用 localstorage 來保 ...


一、頁面刷新時,如何保持原有vuex中的state信息

  頁面刷新後,原有的 vuex 中的 state 會發生改變,如果在頁面刷新之前,可以將 state 信息保存,頁面重新載入時,再將該值賦給 state,那麼該問題即可解決。

1、localstorage

  可以使用 localstorage 來保存信息。

【在某組件中添加如下鉤子函數。比如 App.vue中】
created() {
    //在頁面載入時讀取localStorage里的狀態信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

    //在頁面刷新時將vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("store",JSON.stringify(this.$store.state))
    })
}


註:
    this.$store.replaceState()  用於替換 store 的信息(狀態合併)。
    Object.assign(target, ...source)  將source的值 賦給 target,若有重覆的數據,則覆蓋。其中...表示可以多個source。
    JSON.stringify()  用於將對象轉為 JSON
    JSON.parse()   用於將 JSON 轉為對象

註意:
  若有兩個組件,當調用 localstorage 的值,可能會出現問題。
  如下圖,Main.vue 中 每次刷新頁面會 觸發 localstorage 操作。
  開始 localstorage 中沒值,某用戶通過 Login.vue 組件 進入 Main.vue 組件並刷新頁面後,localStorage 會記錄當前用戶相關的 state 信息。
  直接在瀏覽器中切換路徑到Login.vue。當另外一個用戶通過 Login.vue 併進入 Main.vue 時,此時獲取的就是上一個用戶的信息,這樣肯定會出問題(我遇到的一個坑,大致意思就是這樣)。

 

 

一個暴力的解決思路,在Login.vue中 直接將上一個用戶緩存的信息給刪除。
此時 localStorage 沒有了上個用戶的信息。
【Login.vue】
created() {
    // 進入畫面前,移除主頁面保存的 state 信息
    localStorage.removeItem("store")
}

然後只在Main組件刷新時 使用 localStorage 記錄信息。
【Main.vue】
created() {
    //在頁面載入時讀取localStorage里的狀態信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

    //在頁面刷新時將vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("store",JSON.stringify(this.$store.state))
    })
}

 

2、sessionStorage

  也可以使用 sessionStorage 來保存信息。

【在某組件中添加如下鉤子函數。比如 App.vue中】
created() {
    //在頁面載入時讀取sessionStorage里的狀態信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }

    //在頁面刷新時將vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
}

 

3、localstorage 與 sessionStorage 的區別

(1)localstorage 與 sessionStorage 都是客戶端用於存儲數據的。
(2)localStorage是沒有失效時間的,sessionStorage的聲明周期是瀏覽器的生命周期。
(3)當瀏覽器關閉時,sessionStorage的數據將清空,而localStorage數據只要不通過代碼特意的刪除或手動刪除,是永久保存的。
(4)若想清除localstorage 的數據。

localStorage.removeItem(key)       清除一條數據
localStorage.clear()               清除全部的數據

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 鬼知道我是如何堅持下來的,如果非要找個理由,那或許是所謂的熱愛。 公眾號轉眼間寫了三年。寫的內容圍繞著安卓技術,源碼剖析,生活感悟,職場人生。 很慶幸的是,得到大家的支持,每一條留言都會是一次交流,看著後臺用戶有來有去,這才是該有的節奏。 這就如同呼吸一樣,說明我的公號有生命力。藉著這個時機,想聊聊 ...
  • 版本號0.1.54 看源碼之前,我先去看下官方文檔,對於其源碼的設計說明,文中所說的原生都是指android 看完官方文檔的說明,我有以下幾個疑問 第一個:容器是怎麼設計的? 第二個:native和flutter的channel的通道是如何設計的? 第三個:Flutter是適配層到底再做些什麼? 中 ...
  • 1.錯誤顯示 com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details log提示:Generate Signed APK: Errors while building APK. You can find ...
  • ![](https://img2018.cnblogs.com/blog/1170268/201910/1170268-20191023001452341-966459818.jpg) ...
  • 今天在項目中遇到的一個需求: 在一個選項卡功能的頁面,出現的問題是,當點擊選項卡的某個選項時,會同時載入整個選項卡的數據,本身產品就很大,數據很多,所以這個問題無法忽略; 仔細研究下發現,當剛進入頁面時,只會載入當前一個tab的數據,這樣是正常的,但當再次點擊別的tab時,之前tab的介面就都連帶著 ...
  • 獲取鏡像```docker pull mariadb```掛載```docker volume create data_mariadb``````docker run --name mariadb -v data_mariadb:/var/lib/mysql \-p 3306:3306 -e MYS... ...
  • 選擇器: CSS的基本選擇器: 優先順序 ID > 類 > 標簽 標簽選擇器:直接使用標簽名字來選擇 類選擇器:通過標簽上面的class屬性名稱來獲取一類標簽 css中通過.類名 來設置 ID選擇器:通過標簽上面的ID屬性名稱來獲取單一的標簽 css中通過 #id名 來設置 註意:ID屬性具有唯一性, ...
  • vue生命周期 1.面試官通常會問請詳細的說下vue生命周期的理解 答:vue的生命周期分為8個階段這八個階段主要分別如下 創建前後:beforeCreated和Created beforeCreated(創建前):vue實例掛載元素$el和數據對象data都為undefined,還未初始化 Cre ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...