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

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

前言

vue構建的單頁大型項目中，可能會用到Vuex 。Vuex 的狀態存儲是響應式的，當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。

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

比如，用戶已經登錄了，我把登錄狀態放到state中了，一刷新頁面，還要重新登錄？購物車里的添加的數據，一刷新要重新添加？

解決思路：

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

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

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

sessionStorage和localStorage介紹

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

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

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

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

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

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

代碼：

項目目錄結構：

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

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

網頁標題：vuex刷新時數據有丟失如何解決-創新互聯
網站URL：http://vcdvsql.cn/article30/ddhsso.html

成都網站建設公司_創新互聯，為您提供定制開發、搜索引擎優化、域名注冊、小程序開發、品牌網站設計、做網站

廣告

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