vuex刷新時數(shù)據(jù)有丟失如何解決-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)vuex刷新時數(shù)據(jù)有丟失如何解決，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的沽源網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

前言

vue構(gòu)建的單頁大型項目中，可能會用到Vuex 。Vuex 的狀態(tài)存儲是響應(yīng)式的，當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。

但是有一個問題就是：vuex的存儲的數(shù)據(jù)只是在頁面的中，相當(dāng)于我們定義的全局變量，刷新之后，里邊的數(shù)據(jù)就會恢復(fù)到初始化狀態(tài)。但是這個情況有時候并不是我們所希望的。

比如，用戶已經(jīng)登錄了，我把登錄狀態(tài)放到state中了，一刷新頁面，還要重新登錄？購物車?yán)锏奶砑拥臄?shù)據(jù)，一刷新要重新添加？

解決思路：

監(jiān)聽頁面是否刷新，如果頁面刷新了，將state對象存入到sessionStorage/localStorage中。

頁面打開之后，判斷sessionStorage/localStorage中是否存在state對象，如果存在，則說明頁面是被刷新過的，將sessionStorage/localStorage中存的數(shù)據(jù)取出來給vuex中的state賦值。

如果不存在，說明是第一次打開，則取vuex中定義的state初始值。

sessionStorage和localStorage介紹

H5提供了我們常用的localStorage和sessionStorage。

兩者的區(qū)別：localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在。

存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。sessionStorage僅在當(dāng)前會話下有效，關(guān)閉頁面或瀏覽器后被清除。

存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。

源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持。瀏覽器的支持除了IE７及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運行)

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem、removeItem、clear等。

代碼：

項目目錄結(jié)構(gòu)：

在項目的入口頁面（App.vue）里添加監(jiān)聽刷新事件：

name: 'App',
 mounted () {
 window.addEventListener('unload', this.saveState)
 },
 methods: {
 saveState () {
  sessionStorage.setItem('state', JSON.stringify(this.$store.state))
 }
 }

網(wǎng)頁標(biāo)題：vuex刷新時數(shù)據(jù)有丟失如何解決-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://bm7419.com/article30/ddhsso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、搜索引擎優(yōu)化、域名注冊、小程序開發(fā)、品牌網(wǎng)站設(shè)計、做網(wǎng)站

廣告

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