關(guān)于vuex狀態(tài)刷新網(wǎng)頁(yè)時(shí)數(shù)據(jù)被清空問題及解決
vuex狀態(tài)刷新網(wǎng)頁(yè)時(shí)數(shù)據(jù)被清空問題
vuex狀態(tài)管理，在網(wǎng)頁(yè)刷新數(shù)據(jù)被清空的解決方法。
在main.js中寫入下面的代碼段（親測(cè)有效）
//刷新保存狀態(tài)
if (sessionStorage.getItem("store")) {
store.replaceState(
Object.assign(
{},
store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store")
}
//監(jiān)聽，在頁(yè)面刷新時(shí)將vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(store.state));
});vuex狀態(tài)在頁(yè)面刷新時(shí),會(huì)清空狀態(tài)的解決
store寫入的state在頁(yè)面刷新時(shí)會(huì)被清空，這時(shí)可以用sessionStorage緩存狀態(tài)。因?yàn)閘ocalStorage會(huì)永久保存數(shù)據(jù)，只有用戶手動(dòng)清除的時(shí)候才會(huì)清除。cookie存儲(chǔ)內(nèi)存只有4k,并且始終在同源的http請(qǐng)求中攜帶。而sessionStorage在關(guān)閉瀏覽器頁(yè)面時(shí)就會(huì)清空。
因?yàn)闋顟B(tài)只會(huì)在刷新頁(yè)面的時(shí)候清空，所以我們只需要去app.vue里面在頁(yè)面刷新之前把store保存在sessionStorage里面。在頁(yè)面加載時(shí)讀取sessionStorage的值
由于瀏覽器存儲(chǔ)時(shí)會(huì)自動(dòng)把對(duì)象轉(zhuǎn)換成字符串格式，且不具備轉(zhuǎn)換對(duì)象的鍵和值為字符串的效果，只會(huì)轉(zhuǎn)換為[object,object]。因此需要先將對(duì)象轉(zhuǎn)換為json字符串存儲(chǔ)，取出時(shí)再使用JSON.parse()方法轉(zhuǎn)換為json對(duì)象。
app.vue
created () {
? ? // 在頁(yè)面加載時(shí)讀取sessionStorage
? ? if (sessionStorage.getItem('store')) {
? ? ? this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
? ? }
? ? // 在頁(yè)面刷新時(shí)將store保存到sessionStorage里
? ? window.addEventListener('beforeunload', () => {
? ? ? sessionStorage.setItem('store', JSON.stringify(this.$store.state))
? ? })
? }以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開剩余數(shù)據(jù)實(shí)例
這篇文章主要介紹了vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開剩余數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue項(xiàng)目打包后上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽
這篇文章主要介紹了vue項(xiàng)目打包后上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
計(jì)算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測(cè)數(shù)據(jù)變化的一個(gè)屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計(jì)算屬性和屬性偵聽的相關(guān)資料,需要的朋友可以參考下2021-10-10
Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
使用v-on:click給button綁定監(jiān)聽事件以及回調(diào)函數(shù)，@是v-on:的縮寫，也就是簡(jiǎn)寫也可以使用@click，這篇文章主要介紹了Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符,需要的朋友可以參考下2022-08-08
Vue使用electron轉(zhuǎn)換項(xiàng)目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫(kù)。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易2023-03-03
nginx是一個(gè)高性能的HTTP和反向代理服務(wù)器。這篇文章主要介紹了vue.js項(xiàng)目nginx部署,需要的朋友可以參考下2018-04-04
Vue實(shí)現(xiàn)點(diǎn)擊按鈕下載文件的操作代碼(后端Java)
最近項(xiàng)目中需要實(shí)現(xiàn)點(diǎn)擊按鈕下載文件的需求，前端用的vue后端使用的java代碼，今天通過本文給大家分享vue點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
這篇文章主要為大家詳細(xì)介紹了vue拖拽排序插件vuedraggable的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題
這篇文章主要介紹了解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07