使用vuex解決刷新頁面state數(shù)據(jù)消失的問題記錄
在實(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vuex-Persist 是一個(gè)用于在 Vuex 中實(shí)現(xiàn)持久化狀態(tài)的庫,它可以用來解決應(yīng)用程序在刷新瀏覽器或關(guān)閉頁面后丟失 Vuex store 中狀態(tài)的問題,本文給大家介紹vuex-persist 可以用來干什么,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了vue日志之如何select選中默認(rèn)值，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了通過html文件來使用Vue的單文件組件形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue實(shí)現(xiàn)下拉框的多選功能(附后端處理參數(shù))
本文介紹了如何使用Vue實(shí)現(xiàn)下拉框的多選功能,實(shí)現(xiàn)了在選擇框中選擇多個(gè)選項(xiàng)的功能,文章詳細(xì)介紹了實(shí)現(xiàn)步驟和示例代碼,對于想要了解如何使用Vue實(shí)現(xiàn)下拉框多選功能的讀者具有一定的參考價(jià)值2023-08-08
在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作
這篇文章主要介紹了在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)代碼(純前端)
滑塊驗(yàn)證作為一種反機(jī)器人的工具,也會(huì)不斷發(fā)展和演進(jìn),以適應(yīng)不斷變化的威脅,這篇文章主要給大家介紹了vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤問題的解決
這篇文章主要介紹了Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤問題的解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue或者React項(xiàng)目配置@路徑別名及智能提示方案
這篇文章主要介紹了Vue或者React項(xiàng)目配置@路徑別名及智能提示方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue如何重置data的所有屬性，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04