vuex頁面刷新數據丟失解決方法詳解

    目錄 原因 解決思路 代碼如下 原因 在vue項目中用vuex來做全局的狀態管理, 發現當刷新網頁后,保存在vuex實例store里的數據會丟失。 因為store里的數據是保存在運行內存中的,當頁面刷
    目錄
    • 原因
    • 解決思路
    • 代碼如下

    原因

    在vue項目中用vuex來做全局的狀態管理, 發現當刷新網頁后,保存在vuex實例store里的數據會丟失。

    因為store里的數據是保存在運行內存中的,當頁面刷新時,頁面會重新加載vue實例,store里面的數據就會被重新賦值初始化

    解決思路

    將state的數據保存在localstorage、sessionstorage或cookie中(三者的區別),這樣即可保證頁面刷新數據不丟失且易于讀取。

    • localStorage: localStorage的生命周期是永久的,關閉頁面或瀏覽器之后localStorage中的數據也不會消失。localStorage除非主動刪除數據,否則數據永遠不會消失。
    • sessionStorage:sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念,sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉,即使刷新頁面或者進入同源另一個頁面,數據依然存在。但是sessionStorage在關閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面,sessionStorage也是不一樣的。
    • cookie:cookie生命期為只在設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉。 存放數據大小為4K左右,有個數限制(各瀏覽器不同),一般不能超過20個。缺點是不能儲存大數據且不易讀取。

    由于vue是單頁面應用,操作都是在一個頁面跳轉路由,因此sessionStorage較為合適,原因如下:

    • sessionStorage可以保證打開頁面時sessionStorage的數據為空;
    • 每次打開頁面localStorage存儲著上一次打開頁面的數據,因此需要清空之前的數據。

    vuex中state數據的修改必須通過mutation方法進行修改,因此mutation修改state的同時需要修改sessionstorage,問題倒是可以解決但是感覺很麻煩,state中有很多數據,很多mutation修改state就要很多次sessionstorage進行修改,既然如此直接用sessionstorage解決不就行了,為何還要用vuex多此一舉呢?
    vuex的數據在每次頁面刷新時丟失,是否可以在頁面刷新前再將數據存儲到sessionstorage中呢,是可以的,beforeunload事件可以在頁面刷新前觸發,但是在每個頁面中監聽beforeunload事件感覺也不太合適,那么最好的監聽該事件的地方就在app.vue中。

    • 在app.vue的created方法中讀取sessionstorage中的數據存儲在store中,此時用vuex.store的replaceState方法,替換store的根狀態
    • 在beforeunload方法中將store.state存儲到sessionstorage中。

    代碼如下

    export default {
      name: 'App',
      created () {
        //在頁面加載時讀取sessionStorage里的狀態信息
        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頁面刷新數據丟失解決方法詳解的詳細內容,更多關于vuex頁面刷新數據丟失解決的資料請關注技圈網其它相關文章!

    聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
    發表評論
    更多 網友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 一区二区三区免费在线视频 | 国模吧一区二区三区精品视频| 亚洲男人的天堂一区二区| 国产精品电影一区二区三区| 亚洲一区二区三区国产精品| 国产日韩高清一区二区三区 | 人妻视频一区二区三区免费| 无码精品尤物一区二区三区| 日韩在线视频不卡一区二区三区| 琪琪see色原网一区二区| 国产在线精品一区二区三区直播 | 亚洲av无码一区二区三区网站| 精品人伦一区二区三区潘金莲| 精品国产一区二区三区| 亚洲国产激情一区二区三区 | 一区在线观看视频| 国产AV一区二区三区无码野战| 中文无码一区二区不卡αv| 精品一区二区三区视频在线观看| 国产一区二区四区在线观看| 精品永久久福利一区二区| 国产成人精品一区二区三在线观看 | 精品国产一区二区三区色欲 | 精品一区二区三区四区在线| 色久综合网精品一区二区| 精品一区二区三区中文| 色妞色视频一区二区三区四区| 美女福利视频一区二区| 亚洲日本乱码一区二区在线二产线 | 老熟妇仑乱一区二区视頻| 国产人妖视频一区二区破除| 亚洲一区影音先锋色资源| 午夜精品一区二区三区在线视 | 成人精品一区二区三区不卡免费看 | 亚洲香蕉久久一区二区三区四区 | 爆乳熟妇一区二区三区| 日本一道高清一区二区三区| 国产成人精品一区二区秒拍| 国产福利电影一区二区三区,亚洲国模精品一区 | 国产精品无圣光一区二区| 国产一区二区精品在线观看|