vue頁面狀態(tài)持久化怎么實(shí)現(xiàn)

本篇內(nèi)容介紹了“vue頁面狀態(tài)持久化怎么實(shí)現(xiàn)”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

需求：左樹右表。組織樹選中某一節(jié)點(diǎn)后，進(jìn)入詳情頁面，再返回時(shí)需要保持選中。其他查詢條件也需要保持狀態(tài)。

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

代碼：

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

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

 在vuex的actions中，通過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：頁面剛創(chuàng)建時(shí)從localStorage中拿緩存的數(shù)據(jù)

devicFaultId: Storage.get('devicFaultId'),

進(jìn)入某詳情頁，回退時(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中引入后就可以通過Storage.set使用啦

“vue頁面狀態(tài)持久化怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！