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