vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
解決vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失問(wèn)題
vuex數(shù)據(jù)是存在內(nèi)存當(dāng)中，當(dāng)頁(yè)面刷新之后vuex數(shù)據(jù)自然會(huì)丟失。我們有兩種方法解決該問(wèn)題:
1.使用vuex-along
2.使用localStorage或者sessionStroage
1.使用vuex-along
vuex-along的實(shí)質(zhì)也是將vuex中的數(shù)據(jù)存放到localStorage或者sessionStroage中，只不過(guò)這個(gè)存取過(guò)程這個(gè)組件會(huì)幫我們完成,我們只需要用vuex的讀取數(shù)據(jù)方式操作就可以了,簡(jiǎn)單了解一下vuex-along的使用方法。
安裝vuex-along:
npm install vuex-along --save
配置vuex-along: 在store/index.js 中最后添加以下代碼:
import VueXAlong from 'vuex-along' //導(dǎo)入插件
export default new Vuex.Store({
//modules: {
//controler //模塊化vuex
//},
plugins: [VueXAlong({
name: 'store', //存放在localStroage或者sessionStroage 中的名字
local: false, //是否存放在local中 false 不存放 如果存放按照下面session的配置
session: { list: [], isFilter: true } //如果值不為false 那么可以傳遞對(duì)象 其中 當(dāng)isFilter設(shè)置為true時(shí)， list 數(shù)組中的值就會(huì)被過(guò)濾調(diào),這些值不會(huì)存放在seesion或者local中
})]
});
2.使用localStorage或者sessionStroage
created() {
//在頁(yè)面加載時(shí)讀取sessionStorage里的狀態(tài)信息
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
}
//在頁(yè)面刷新時(shí)將vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
},
上面兩種方法都可以解決vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失問(wèn)題。按照上面的方法配置之后就可以正常使用vuex了，頁(yè)面刷新數(shù)據(jù)也不會(huì)丟失了。
以上就是vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案的詳細(xì)內(nèi)容，更多關(guān)于vuex 數(shù)據(jù)丟失的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue項(xiàng)目在IE瀏覽器頁(yè)面白屏且報(bào)錯(cuò)SCRIPT1010:缺少標(biāo)識(shí)符問(wèn)題
Vue項(xiàng)目在谷歌瀏覽器中正常運(yùn)行,但在IE瀏覽器中出現(xiàn)問(wèn)題,如白屏和控制臺(tái)報(bào)錯(cuò),解決過(guò)程包括檢查IE設(shè)置、調(diào)整編輯器配置、引入兼容性插件、使用productionSourceMap定位錯(cuò)誤、檢查插件依賴(lài)和版本,以及重新構(gòu)建項(xiàng)目2024-09-09
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios，然后項(xiàng)目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料，文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vue2模擬vue-element-admin手寫(xiě)角色權(quán)限的實(shí)現(xiàn)
本文主要介紹了vue2模擬vue-element-admin手寫(xiě)角色權(quán)限的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)
這篇文章主要介紹了使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程,文中通過(guò)示例介紹了vue3拖拽組件vuedraggable的使用demo，需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了vue面試observable原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
原生javascript中檢查對(duì)象是否為空示例實(shí)現(xiàn)
這篇文章主要為大家介紹了原生javascript中檢查對(duì)象是否為空示例實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2021-11-11
vue實(shí)現(xiàn)Input輸入框模糊查詢(xún)方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)Input輸入框模糊查詢(xún)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Vue項(xiàng)目保存代碼之后頁(yè)面自動(dòng)更新問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目保存代碼之后頁(yè)面自動(dòng)更新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js如何處理數(shù)組對(duì)象中某個(gè)字段是否變?yōu)閮蓚€(gè)字段
這篇文章主要介紹了vue.js如何處理數(shù)組對(duì)象中某個(gè)字段是否變?yōu)閮蓚€(gè)字段方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03