国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

使用vuex解決刷新頁面state數據消失的問題記錄

來源:懂視網 責編:小采 時間:2020-11-27 21:57:33
文檔

使用vuex解決刷新頁面state數據消失的問題記錄

使用vuex解決刷新頁面state數據消失的問題記錄:在實際的vue項目中,當我們的應用遇到多個組件之間的共享問題時,通常會用到Vuex(一個狀態管理的插件,可以解決不同組件之間的數據共享和數據持久化),解決組件之間同一狀態的共享問題。 因子: Vuex優勢:相比sessionStorage,存儲數據更安全,sessi
推薦度:
導讀使用vuex解決刷新頁面state數據消失的問題記錄:在實際的vue項目中,當我們的應用遇到多個組件之間的共享問題時,通常會用到Vuex(一個狀態管理的插件,可以解決不同組件之間的數據共享和數據持久化),解決組件之間同一狀態的共享問題。 因子: Vuex優勢:相比sessionStorage,存儲數據更安全,sessi

在實際的vue項目中,當我們的應用遇到多個組件之間的共享問題時,通常會用到Vuex(一個狀態管理的插件,可以解決不同組件之間的數據共享和數據持久化),解決組件之間同一狀態的共享問題。

因子:

  • Vuex優勢:相比sessionStorage,存儲數據更安全,sessionStorage可以在控制臺被看到。
  • Vuex劣勢:在刷新頁面后,vuex會重新更新state,所以,存儲的數據會丟失。
  • 言而總之:

    實際問題:在vue項目中,使用Vuex做狀態管理時,調試頁面時,刷新后state上的數據消失了,該如何解決?

    解決思路:將state中的數據放在瀏覽器sessionStorage和localStorage

    解決辦法:

    存儲到localStorage

    通過監聽頁面的刷新操作,即beforeunload前存入本地localStorage,頁面加載時再從本地localStorage讀取信息
    在App.vue中加入下面代碼

    created(){
     //在頁面刷新時將vuex里的信息保存到localStorage里
     window.addEventListener("beforeunload",()=>{
     localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
     })
     
     //在頁面加載時讀取localStorage里的狀態信息
     localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
     }
    

    使用vuex-persistedstate 插件

    安裝插件:npm install vuex-persistedstate --save

    配置:

    在store的index.js中,手動引入插件并配置

    import createPersistedState from "vuex-persistedstate"
    const store = new Vuex.Store({
     // ...
     plugins: [createPersistedState()]
    })
    

    該插件默認持久化所有state,當然也可以指定需要持久化的state:

    import createPersistedState from "vuex-persistedstate"
    const store = new Vuex.Store({
     // ...
     plugins: [createPersistedState({
     storage: window.sessionStorage,
     reducer(data) {
     return {
     // 設置只儲存state中的myData
     myData: data.myData
     }
     }
     })]
    

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    使用vuex解決刷新頁面state數據消失的問題記錄

    使用vuex解決刷新頁面state數據消失的問題記錄:在實際的vue項目中,當我們的應用遇到多個組件之間的共享問題時,通常會用到Vuex(一個狀態管理的插件,可以解決不同組件之間的數據共享和數據持久化),解決組件之間同一狀態的共享問題。 因子: Vuex優勢:相比sessionStorage,存儲數據更安全,sessi
    推薦度:
    標簽: 數據 VUE 頁面
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 国产一级淫片免费播放 | 国产精品合集一区二区三区 | www.亚洲欧美 | 日韩三 | 国产一级一片免费播放视频 | 91岛国| 欧美在线一| 成人国产一区二区三区精品 | 日韩国产欧美一区二区三区 | 中文字幕第四页 | 一级毛片成人免费看a | 国产视频最新 | 国产精品成人久久久久久久 | 免费视频国产 | 国产高清免费在线观看 | 日韩欧美色 | 国产亚洲精品片a77777 | 一级毛片免费的 | 国产精品成人69xxx免费视频 | 久久99精品久久久久久 | 亚洲视频二 | 中文字幕第七页 | 欧美国产精品va在线观看 | 午夜日韩视频 | 欧美专区第一页 | 日韩欧美视频 | 手机看日韩 | 全免费a级毛片免费看不卡 日本二区在线观看 | 欧美网站在线看 | 国产欧美日韩第一页 | 欧美第四页| 亚洲欧美国产高清va在线播放 | 人善交另类欧美重口另类 | 亚洲午夜久久久久久91 | 欧美日韩亚洲国产 | 欧美一区二区在线免费观看 | 亚洲欧美在线免费观看 | 国产高清不卡码一区二区三区 | 日韩经典欧美一区二区三区 | 最近中文字幕高清电影在线 | 亚洲精品视频免费在线观看 |