快捷導(dǎo)航

vuex頁(yè)面刷新數(shù)據(jù)丟失解決方法詳解

更新時(shí)間：2023年07月14日 09:35:09 作者：醉前端

這篇文章主要為大家介紹了vuex頁(yè)面刷新數(shù)據(jù)丟失解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

原因

在vue項(xiàng)目中用vuex來(lái)做全局的狀態(tài)管理，發(fā)現(xiàn)當(dāng)刷新網(wǎng)頁(yè)后，保存在vuex實(shí)例store里的數(shù)據(jù)會(huì)丟失。

因?yàn)閟tore里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的,當(dāng)頁(yè)面刷新時(shí)，頁(yè)面會(huì)重新加載vue實(shí)例，store里面的數(shù)據(jù)就會(huì)被重新賦值初始化

解決思路

將state的數(shù)據(jù)保存在localstorage、sessionstorage或cookie中（三者的區(qū)別），這樣即可保證頁(yè)面刷新數(shù)據(jù)不丟失且易于讀取。

localStorage: localStorage的生命周期是永久的，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失。
sessionStorage:sessionStorage的生命周期是在僅在當(dāng)前會(huì)話下有效。sessionStorage引入了一個(gè)“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀。同時(shí)獨(dú)立的打開(kāi)同一個(gè)窗口同一個(gè)頁(yè)面，sessionStorage也是不一樣的。
cookie:cookie生命期為只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。存放數(shù)據(jù)大小為4K左右,有個(gè)數(shù)限制（各瀏覽器不同），一般不能超過(guò)20個(gè)。缺點(diǎn)是不能儲(chǔ)存大數(shù)據(jù)且不易讀取。

由于vue是單頁(yè)面應(yīng)用，操作都是在一個(gè)頁(yè)面跳轉(zhuǎn)路由，因此sessionStorage較為合適,原因如下：

sessionStorage可以保證打開(kāi)頁(yè)面時(shí)sessionStorage的數(shù)據(jù)為空；
每次打開(kāi)頁(yè)面localStorage存儲(chǔ)著上一次打開(kāi)頁(yè)面的數(shù)據(jù)，因此需要清空之前的數(shù)據(jù)。

vuex中state數(shù)據(jù)的修改必須通過(guò)mutation方法進(jìn)行修改，因此mutation修改state的同時(shí)需要修改sessionstorage,問(wèn)題倒是可以解決但是感覺(jué)很麻煩，state中有很多數(shù)據(jù)，很多mutation修改state就要很多次sessionstorage進(jìn)行修改，既然如此直接用sessionstorage解決不就行了，為何還要用vuex多此一舉呢？
vuex的數(shù)據(jù)在每次頁(yè)面刷新時(shí)丟失，是否可以在頁(yè)面刷新前再將數(shù)據(jù)存儲(chǔ)到sessionstorage中呢，是可以的，beforeunload事件可以在頁(yè)面刷新前觸發(fā)，但是在每個(gè)頁(yè)面中監(jiān)聽(tīng)beforeunload事件感覺(jué)也不太合適，那么最好的監(jiān)聽(tīng)該事件的地方就在app.vue中。

在app.vue的created方法中讀取sessionstorage中的數(shù)據(jù)存儲(chǔ)在store中，此時(shí)用vuex.store的replaceState方法，替換store的根狀態(tài)
在beforeunload方法中將store.state存儲(chǔ)到sessionstorage中。

代碼如下

export default {
  name: 'App',
  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è)面刷新數(shù)據(jù)丟失解決方法詳解的詳細(xì)內(nèi)容，更多關(guān)于vuex頁(yè)面刷新數(shù)據(jù)丟失解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: