詳解vue頁(yè)面狀態(tài)持久化詳解

更新時(shí)間：2021年12月05日 16:04:16 作者：Wonder*

這篇文章主要為大家介紹了vue頁(yè)面狀態(tài)持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

思路：用vuex結(jié)合localStorage緩存數(shù)據(jù)。點(diǎn)擊樹(shù)節(jié)點(diǎn)或查詢按鈕時(shí)，將數(shù)據(jù)保存在vuex中，同時(shí)存在localStorage中；頁(yè)面回退時(shí)，將存在localStorage中的數(shù)據(jù)放到vuex中，在頁(yè)面代碼中判斷vuex中是否有我們存的數(shù)據(jù)，有則直接用，沒(méi)有則默認(rèn)初始數(shù)據(jù)。當(dāng)頁(yè)面導(dǎo)航路由跳轉(zhuǎn)時(shí)再清除緩存的頁(yè)面數(shù)據(jù)。

代碼：

點(diǎn)擊某樹(shù)節(jié)點(diǎn)時(shí)，存下id至vuex中。通過(guò)dispatch觸發(fā)action

this.$store.dispatch('SetDeviceFaultId', data.id)

?在vuex的actions中，通過(guò)commit?觸發(fā) mutations 中的方法

RemoveDeviceFaultId({ commit }) {    //后面清除數(shù)據(jù)時(shí)會(huì)用到
    commit('REMOVE_DEVICEFAULTID');
},
SetDeviceManageId({ commit }, id) {  
    commit('SET_DEVICEMANAGEID', id);
},

mutations：修改數(shù)據(jù)

REMOVE_DEVICEFAULTID: (state) => {
      state.devicFaultId = null     
      Storage.remove('devicFaultId');
},
SET_DEVICEMANAGEID: (state, deviceManageId) => {
      state.deviceManageId = deviceManageId
      Storage.set('deviceManageId', deviceManageId);
}

state：頁(yè)面剛創(chuàng)建時(shí)從localStorage中拿緩存的數(shù)據(jù)

devicFaultId: Storage.get('devicFaultId'),

進(jìn)入某詳情頁(yè)，回退時(shí)

this.params.organizeId = this.$store.state.tree.devicFaultId ? this.$store.state.tree.devicFaultId : res.data[0].id;

點(diǎn)擊其他路由時(shí)，記得清除緩存的數(shù)據(jù)

this.$store.dispatch('RemoveDeviceFaultId')

補(bǔ)充：

storage.js代碼

?在vuex中引入后就可以通過(guò)Storage.set使用啦

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

使用vue腳手架（vue-cli）搭建一個(gè)項(xiàng)目詳解
這篇文章主要介紹了vue腳手架（vue-cli）搭建項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue router路由嵌套不顯示問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問(wèn)題
2017-06-06
使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案
在 Vue 的響應(yīng)式系統(tǒng)中,reactive 對(duì)象是一個(gè)深度代理,它會(huì)追蹤對(duì)象屬性的變更,但如果你將整個(gè)對(duì)象重新賦值,那么 Vue 無(wú)法繼續(xù)追蹤新的對(duì)象,本文給大家介紹了使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案,需要的朋友可以參考下
2024-09-09
vue實(shí)現(xiàn)前端展示后端實(shí)時(shí)日志帶顏色示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)前端展示后端實(shí)時(shí)日志帶顏色示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
Vue實(shí)現(xiàn)瀏覽器打印功能的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)瀏覽器打印功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
vue基于Teleport實(shí)現(xiàn)Modal組件
Teleport 提供了一種干凈的方法，允許我們控制在 DOM 中哪個(gè)父節(jié)點(diǎn)下渲染了 HTML，而不必求助于全局狀態(tài)或?qū)⑵洳鸱譃閮蓚€(gè)組件。
2021-05-05
Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue-CLI 3.X 部署項(xiàng)目至生產(chǎn)服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3.X 部署項(xiàng)目至生產(chǎn)服務(wù)器的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue3使用flv.js播放推流視頻的示例代碼
本文主要介紹了vue3使用flv.js播放推流視頻的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue2+elementui上傳照片方式(el-upload超簡(jiǎn)單)
這篇文章主要介紹了vue2+elementui上傳照片方式(el-upload超簡(jiǎn)單),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03