詳解vue頁面狀態(tài)持久化詳解
更新時間：2021年12月05日 16:04:16 作者：Wonder*
這篇文章主要為大家介紹了vue頁面狀態(tài)持久化，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
需求：左樹右表。組織樹選中某一節(jié)點后，進入詳情頁面，再返回時需要保持選中。其他查詢條件也需要保持狀態(tài)。
思路：用vuex結合localStorage緩存數據。點擊樹節(jié)點或查詢按鈕時，將數據保存在vuex中，同時存在localStorage中；頁面回退時，將存在localStorage中的數據放到vuex中，在頁面代碼中判斷vuex中是否有我們存的數據，有則直接用，沒有則默認初始數據。當頁面導航路由跳轉時再清除緩存的頁面數據。
代碼：
點擊某樹節(jié)點時，存下id至vuex中。通過dispatch觸發(fā)action
this.$store.dispatch('SetDeviceFaultId', data.id)
?在vuex的actions中，通過commit?觸發(fā) mutations 中的方法
RemoveDeviceFaultId({ commit }) { //后面清除數據時會用到
commit('REMOVE_DEVICEFAULTID');
},
SetDeviceManageId({ commit }, id) {
commit('SET_DEVICEMANAGEID', id);
},
mutations：修改數據
REMOVE_DEVICEFAULTID: (state) => {
state.devicFaultId = null
Storage.remove('devicFaultId');
},
SET_DEVICEMANAGEID: (state, deviceManageId) => {
state.deviceManageId = deviceManageId
Storage.set('deviceManageId', deviceManageId);
}
state：頁面剛創(chuàng)建時從localStorage中拿緩存的數據
devicFaultId: Storage.get('devicFaultId'),
進入某詳情頁，回退時
this.params.organizeId = this.$store.state.tree.devicFaultId ? this.$store.state.tree.devicFaultId : res.data[0].id;
點擊其他路由時，記得清除緩存的數據
this.$store.dispatch('RemoveDeviceFaultId')
補充：
storage.js代碼
?在vuex中引入后就可以通過Storage.set使用啦
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
在new Vue的配置參數中的computed和methods都可以處理大量的邏輯代碼，但是什么時候用哪個屬性，要好好區(qū)分一下才能做到正確的運用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了element中Steps步驟條和Tabs標簽頁關聯的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了vue 實現通過手機發(fā)送短信驗證碼注冊功能的相關資料,需要的朋友可以參考下2018-04-04
我們在做了用戶登錄后,就會讓用戶跳轉到個人中心,下面這篇文章主要給大家介紹了關于如何使用Vue+Element做個個人中心的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
VUE使用docxtemplater導出word文檔實例(帶圖片)
docxtemplate支持的功能很多,語法包含變量替換、條件判斷、循環(huán)、列表循環(huán)、表格循環(huán)等,下面這篇文章主要給大家介紹了關于VUE使用docxtemplater導出word功能(帶圖片)的相關資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue實現計算器的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue滾動頁面到指定位置的實現及避坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中elementUI表單循環(huán)驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了vue實現拖拽進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
vue項目開發(fā)中setTimeout等定時器的管理問題
這篇文章主要介紹了vue項目開發(fā)中setTimeout等定時器的管理問題,需要的朋友可以參考下2018-09-09