解決vuex數(shù)據(jù)丟失問(wèn)題
數(shù)據(jù)丟失的原因
vuex存儲(chǔ)的數(shù)據(jù)只是在頁(yè)面中,相當(dāng)于全局變量,頁(yè)面刷新的時(shí)候vuex里的數(shù)據(jù)會(huì)重新初始化,導(dǎo)致數(shù)據(jù)丟失。
因?yàn)関uex里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的,當(dāng)頁(yè)面刷新時(shí),頁(yè)面會(huì)重新加載vue實(shí)例,vuex里面的數(shù)據(jù)就會(huì)被重新賦值。
方法1:使用第三方庫(kù) vuex-persistedstate
npm install --save vuex-persistedstate
01 store / index.js 之 localStorage
- 注意點(diǎn): vuex-persistedstate默認(rèn)存儲(chǔ)在 localStorage之中,基本上不需要配置什么
import createPersistedState from "vuex-persistedstate" const store =newVuex.Store({ state: { cartList: [], }, mutations: {}, actions: {}, // 當(dāng)state中的值發(fā)生改變,此時(shí)localStorage中的vuex的值會(huì)同步把state中的所有值存儲(chǔ)起來(lái),當(dāng)頁(yè)面刷 新的時(shí)候,state的值會(huì)從localStorage自動(dòng)獲取vuex的value值,賦值到state中 plugins: [createPersistedState()] })
02 store / index.js 之 sessionStorage
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, plugins: [createPersistedState({ storage:window.sessionStorage // 同localStorage相同,只是將vuex的所有值存儲(chǔ)到sessionStorage中 })] })
03 store / index.js 之 使用vuex-persistedstate指定需要持久化的state
import createPersistedState from "vuex-persistedstate" const store = newVuex.Store({ ?state: { count: 0 }, ?mutations: {}, ?actions: {}, ?plugins: [createPersistedState({ ? storage:window.sessionStorage, ? reducer(val) ?{ ? ? ? ? ?// 此時(shí),當(dāng)count發(fā)生改變的時(shí)候,就會(huì)調(diào)用此函數(shù),并且val的值為當(dāng)前state對(duì)象,return的值為當(dāng)前本地存儲(chǔ)的value值(本地存儲(chǔ)的key值為vuex) ? ? ? ? ?return { ? ? ? ? ? ? ?count: val.count, ? ?changeCount: 'aaa' ? ? ? ? ?} ? ? ?} ?})] })
方法2 把state的數(shù)據(jù)先緩存到localStorage之中,頁(yè)面刷新的時(shí)候,拿到數(shù)據(jù)寫(xiě)入vuex
store / index.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { orderList: [], menuList: [] }, mutations: { orderList(s, d) { s.orderList= d; window.localStorage.setItem("list",jsON.stringify(s.orderList)) }, menuList(s, d) { s.menuList = d; window.localStorage.setItem("list",jsON.stringify(s.menuList)) }, } })
頁(yè)面刷新的時(shí)候
通過(guò)監(jiān)聽(tīng)beforeunload事件來(lái)進(jìn)行數(shù)據(jù)的localStorage存儲(chǔ),beforeunload事件在頁(yè)面刷新時(shí)進(jìn)行觸發(fā),具體做法是在App.vue的created()周期函數(shù)中下如下代碼
if (window.localStorage.getItem("list") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list")))) } window.addEventListener("beforeunload",()=>{ window.localStorage.setItem("list",JSON.stringify(this.$store.state)) })
到此這篇關(guān)于解決vuex數(shù)據(jù)丟失問(wèn)題的文章就介紹到這了,更多相關(guān)vuex 數(shù)據(jù)丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題
- vuex頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題的四種解決方式
- 解決vue頁(yè)面刷新vuex中state數(shù)據(jù)丟失的問(wèn)題
- vuex結(jié)合session存儲(chǔ)數(shù)據(jù)解決頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題
- 關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析
- vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
- vuex刷新后數(shù)據(jù)丟失的解決方法
- vuex存儲(chǔ)復(fù)雜參數(shù)(如對(duì)象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法
- vuex頁(yè)面刷新后數(shù)據(jù)丟失的方法
相關(guān)文章
vue3使用element-plus再次封裝table組件的基本步驟
這篇文章主要介紹了vue3使用element-plus再次封裝table組件的基本步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目)
這篇文章主要介紹了解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作
這篇文章主要介紹了vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11基于vue展開(kāi)收起動(dòng)畫(huà)的示例代碼
這篇文章主要介紹了基于vue展開(kāi)收起動(dòng)畫(huà)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07npm如何更新VUE package.json文件中依賴(lài)的包版本
這篇文章主要介紹了npm如何更新VUE package.json文件中依賴(lài)的包版本問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vue3之列表動(dòng)畫(huà)和狀態(tài)動(dòng)畫(huà)示例詳解
這篇文章主要為大家介紹了Vue3之列表動(dòng)畫(huà)和狀態(tài)動(dòng)畫(huà)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問(wèn)題解決
這篇文章主要為大家介紹了vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05vue實(shí)現(xiàn)購(gòu)物車(chē)結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車(chē)結(jié)算功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06