Detailed explanation of vue page state persistence

Requirement : left tree and right table. After selecting a node in the organization tree, enter the details page and keep it selected when returning. Other query conditions also need to maintain state.

Idea : Use vuex combined with localStorage to cache data. When a tree node or query button is clicked, the data is saved in vuex and also in localStorage. When the page rolls back, the data in localStorage is put into vuex. In the page code, it is determined whether there is data stored in vuex. If there is, it is used directly. If not, the initial data is used by default. When the page navigation route jumps, the cached page data is cleared.

Code:

When a tree node is clicked, the id is saved in vuex. Triggering actions through dispatch

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

In vuex's actions, trigger the methods in mutations by committing

RemoveDeviceFaultId({ commit }) { //commit('REMOVE_DEVICEFAULTID') will be used later to clear data;
},
SetDeviceManageId({ commit }, id) {  
    commit('SET_DEVICEMANAGEID', id);
},

mutations : modify data

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

state: Get cached data from localStorage when the page is first created

devicFaultId: Storage.get('devicFaultId'),

Enter a detail page and return

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

When clicking on other routes, remember to clear the cached data

this.$store.dispatch('RemoveDeviceFaultId')

Replenish:

storage.js code

After introducing it in vuex, you can use it through Storage.set

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!