vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案

更新時(shí)間：2020年12月10日 10:53:31 作者：Killerbee

這篇文章主要介紹了vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案，幫助大家更好的使用vue框架，感興趣的朋友可以了解下

解決vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失問題

vuex數(shù)據(jù)是存在內(nèi)存當(dāng)中，當(dāng)頁(yè)面刷新之后vuex數(shù)據(jù)自然會(huì)丟失。我們有兩種方法解決該問題:
1.使用vuex-along
2.使用localStorage或者sessionStroage

1.使用vuex-along

vuex-along的實(shí)質(zhì)也是將vuex中的數(shù)據(jù)存放到localStorage或者sessionStroage中，只不過這個(gè)存取過程這個(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ì)被過濾調(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ù)丟失問題。按照上面的方法配置之后就可以正常使用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í)符問題
Vue項(xiàng)目在谷歌瀏覽器中正常運(yùn)行,但在IE瀏覽器中出現(xiàn)問題,如白屏和控制臺(tái)報(bào)錯(cuò),解決過程包括檢查IE設(shè)置、調(diào)整編輯器配置、引入兼容性插件、使用productionSourceMap定位錯(cuò)誤、檢查插件依賴和版本,以及重新構(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í)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
vue2模擬vue-element-admin手寫角色權(quán)限的實(shí)現(xiàn)
本文主要介紹了vue2模擬vue-element-admin手寫角色權(quán)限的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
使用vue開發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)
這篇文章主要介紹了使用vue開發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程,文中通過示例介紹了vue3拖拽組件vuedraggable的使用demo，需要的朋友可以參考下
2023-06-06
Vue面試中observable原理詳解
這篇文章主要為大家介紹了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ì)介紹了vue實(shí)現(xiàn)Input輸入框模糊查詢方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
Vue項(xiàng)目保存代碼之后頁(yè)面自動(dòng)更新問題
這篇文章主要介紹了Vue項(xiàng)目保存代碼之后頁(yè)面自動(dòng)更新問題,具有很好的參考價(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