溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用vuex解決刷新頁面state數(shù)據(jù)消失的問題記錄

發(fā)布時(shí)間：2020-09-18 13:09:19 來源：腳本之家 閱讀：209 作者：D阿偉 欄目：web開發(fā)

在實(shí)際的vue項(xiàng)目中，當(dāng)我們的應(yīng)用遇到多個(gè)組件之間的共享問題時(shí)，通常會(huì)用到Vuex（一個(gè)狀態(tài)管理的插件，可以解決不同組件之間的數(shù)據(jù)共享和數(shù)據(jù)持久化），解決組件之間同一狀態(tài)的共享問題。

因子：

  • Vuex優(yōu)勢：相比sessionStorage，存儲(chǔ)數(shù)據(jù)更安全，sessionStorage可以在控制臺(tái)被看到。
  • Vuex劣勢：在刷新頁面后，vuex會(huì)重新更新state，所以，存儲(chǔ)的數(shù)據(jù)會(huì)丟失。

言而總之：

實(shí)際問題：在vue項(xiàng)目中，使用Vuex做狀態(tài)管理時(shí)，調(diào)試頁面時(shí)，刷新后state上的數(shù)據(jù)消失了，該如何解決？

解決思路：將state中的數(shù)據(jù)放在瀏覽器sessionStorage和localStorage

解決辦法：

存儲(chǔ)到localStorage

通過監(jiān)聽頁面的刷新操作，即beforeunload前存入本地localStorage,頁面加載時(shí)再從本地localStorage讀取信息
在App.vue中加入下面代碼

created(){
 //在頁面刷新時(shí)將vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
   localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
  })
  
 //在頁面加載時(shí)讀取localStorage里的狀態(tài)信息
  localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
 }

使用vuex-persistedstate 插件

安裝插件：npm install vuex-persistedstate --save

配置：

在store的index.js中，手動(dòng)引入插件并配置

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState()]
})

該插件默認(rèn)持久化所有state，當(dāng)然也可以指定需要持久化的state：

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(data) {
   return {
   // 設(shè)置只儲(chǔ)存state中的myData
   myData: data.myData
  }
  }
 })]

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手