如何解決vuex刷新頁面數(shù)據(jù)丟失的問題-創(chuàng)新互聯(lián)

小編給大家分享一下如何解決vuex刷新頁面數(shù)據(jù)丟失的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元饒陽做網(wǎng)站,已為上家服務(wù),為饒陽各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

vuex刷新頁面數(shù)據(jù)丟失的解決辦法：1、將vuex中的數(shù)據(jù)直接保存到瀏覽器緩存中；2、在頁面刷新的時(shí)候再次請(qǐng)求遠(yuǎn)程數(shù)據(jù)，使之動(dòng)態(tài)更新vuex數(shù)據(jù)；3、在頁面刷新前將vuex的數(shù)據(jù)先保存至sessionStorage。

1、問題描述：

一般在登錄成功的時(shí)候需要把用戶信息，菜單信息放置vuex中，作為全局的共享數(shù)據(jù)。但是在頁面刷新的時(shí)候vuex里的數(shù)據(jù)會(huì)重新初始化，導(dǎo)致數(shù)據(jù)丟失。因?yàn)関uex里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的，當(dāng)頁面刷新時(shí)，頁面會(huì)重新加載vue實(shí)例，vuex里面的數(shù)據(jù)就會(huì)被重新賦值。

2、解決思路：

辦法一：將vuex中的數(shù)據(jù)直接保存到瀏覽器緩存中（sessionStorage、localStorage、cookie）

辦法二：在頁面刷新的時(shí)候再次請(qǐng)求遠(yuǎn)程數(shù)據(jù)，使之動(dòng)態(tài)更新vuex數(shù)據(jù)

辦法三：在父頁面向后臺(tái)請(qǐng)求遠(yuǎn)程數(shù)據(jù)，并且在頁面刷新前將vuex的數(shù)據(jù)先保存至sessionStorage（以防請(qǐng)求數(shù)據(jù)量過大頁面加載時(shí)拿不到返回的數(shù)據(jù)）

分析：

辦法一的缺點(diǎn)是不安全，不適用大數(shù)據(jù)量的存儲(chǔ)；

辦法二適用于少量的數(shù)據(jù)，并且不會(huì)出現(xiàn)網(wǎng)絡(luò)延遲；

辦法三是要講的重點(diǎn)，辦法二和辦法一一起使用。

3、解決過程：

3.1、選擇合適的瀏覽器存儲(chǔ)

localStorage -- 是永久存儲(chǔ)在本地，除非你主動(dòng)去刪除;

sessionStorage -- 是存儲(chǔ)到當(dāng)前頁面關(guān)閉為止，和其他tab頁沒關(guān)聯(lián);

cookie -- 則根據(jù)你設(shè)置的有效時(shí)間來存儲(chǔ)，但缺點(diǎn)是不能儲(chǔ)存大數(shù)據(jù)且不易讀取，會(huì)和后臺(tái)進(jìn)行交互。

本方法選擇的是sessionStorage，選擇的原因是由于vue是單頁面應(yīng)用，操作都是在一個(gè)頁面跳轉(zhuǎn)路由，另一個(gè)原因是sessionStorage可以保證打開頁面時(shí)sessionStorage的數(shù)據(jù)為空，而如果是localStorage則會(huì)讀取上一次打開頁面的數(shù)據(jù)。

3.2、解決方案

由于state里的數(shù)據(jù)是響應(yīng)式，所以sessionStorage存儲(chǔ)也要跟隨變化，而且只能通過mutations來改變state中的值。

首先在用戶登錄成功之后，然后把用戶信息，菜單信息通過actions分發(fā)保存至vuex中。然后在菜單頁面計(jì)算vuex中state的菜單數(shù)據(jù)，將數(shù)據(jù)解析組裝成前端組件所需的格式，然后渲染組件，生成菜單樹。如果頁面沒有刷新，則一切正常。

登錄成功后將用戶和菜單數(shù)據(jù)同步至vuex

在菜單頁面監(jiān)聽vuex中菜單數(shù)據(jù)

頁面刷新的解決方案：

頁面刷新的時(shí)候異步請(qǐng)求后臺(tái)數(shù)據(jù)，然后動(dòng)態(tài)更新vuex中的數(shù)據(jù)，其中會(huì)有一種情況就是，網(wǎng)絡(luò)延遲、數(shù)據(jù)量大的問題。此時(shí)還沒等vuex獲取到后臺(tái)返回的數(shù)據(jù)，頁面就已經(jīng)加載完成了，這樣就會(huì)造成數(shù)據(jù)丟失。所以該解決方案就是，監(jiān)聽瀏覽器刷新前事件，在瀏覽器刷新之前就把vuex里的數(shù)據(jù)保存至sessionStorage中，刷新成功后如果異步請(qǐng)求的數(shù)據(jù)還沒返回則直接獲取sessionStorage里的數(shù)據(jù)，否則獲取vuex里的數(shù)據(jù)。（只有刷新后還沒取到后臺(tái)數(shù)據(jù)，才會(huì)從sessionStorage里取。確保數(shù)據(jù)的安全性，就算獲取sessionStorage里的數(shù)據(jù)也是安全的，因?yàn)槊看嗡⑿露紩?huì)重新賦值，不必?fù)?dān)心數(shù)據(jù)被篡改問題，其次就是對(duì)sessionStorage里的數(shù)據(jù)做了加密操作）

在父頁面向后臺(tái)請(qǐng)求數(shù)據(jù)，并且監(jiān)聽瀏覽器刷新前事件，將vuex數(shù)據(jù)保存至sessionStorage

在父頁面向后臺(tái)請(qǐng)求數(shù)據(jù)，將返回的數(shù)據(jù)分發(fā)至vuex

以上是“如何解決vuex刷新頁面數(shù)據(jù)丟失的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：如何解決vuex刷新頁面數(shù)據(jù)丟失的問題-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://bm7419.com/article32/cdedpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、Google、網(wǎng)站維護(hù)、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)