目錄

• 程式碼：
• 補充：
• 總結

需求：左樹右表。組織樹選中某一節點後，進入詳情頁面，再返回時需要保持選中。其他查詢條件也需要保持狀態。

思路：用x結合localStorage快取資料。點選樹節點或查詢按鈕時，將資料儲存在vuex中，同時存在localStorage中；頁面回退時，將存在localStorage中的資料放到vuex中，在頁面程式碼中判斷vuex中是否有我們存的數http://www.cppcns.com據，有則直接用，沒有則預設初始資料。當頁面導航路由跳轉時再清除快取的頁面資料。

程式碼：

點選某樹節點時，存下id至vuex中。通過dispatch觸發action

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

在vuex的actions中，通過commit觸發 mutations 中的方法

RemoveDeviceFaultId({ commit }) {    //後面清除資料時會用到
    commit('REMOVE_DEVICEFAULTID');
},SetDeviceManageId({ commit },idtSnFAopAvM) {  
    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：頁面剛建立時從localStorage中拿快取的資料

devicFaultId: Storage.get('devicFaultId'),

進入某詳情頁，回退時

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

點選其他路由時，記得清除快取的資料

this.$store.dispatch('RemoveDeviceFaultId')

補充：

storage.程式碼

在vuex中引入後就可以通過Storage.set使用啦

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!