Detaillierte Erläuterung der Persistenz des Vue-Seitenstatus

Voraussetzung : linker Baum und rechter Tisch. Nachdem Sie im Organisationsbaum einen Knoten ausgewählt haben, rufen Sie die Detailseite auf und lassen Sie ihn bei der Rückkehr ausgewählt. Auch andere Abfragebedingungen müssen ihren Status beibehalten.

Idee : Verwenden Sie vuex in Kombination mit localStorage zum Zwischenspeichern von Daten. Wenn auf einen Baumknoten oder eine Abfrageschaltfläche geklickt wird, werden die Daten in vuex und auch in localStorage gespeichert. Wenn die Seite zurückgesetzt wird, werden die Daten in localStorage in vuex übertragen. Im Seitencode wird ermittelt, ob in vuex gespeicherte Daten vorhanden sind. Wenn dies der Fall ist, werden diese direkt verwendet. Wenn nicht, werden standardmäßig die ursprünglichen Daten verwendet. Wenn die Seitennavigationsroute springt, werden die zwischengespeicherten Seitendaten gelöscht.

Code:

Wenn auf einen Baumknoten geklickt wird, wird die ID in Vuex gespeichert. Auslösen von Aktionen durch Versand

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

Lösen Sie in den Aktionen von vuex die Methoden in Mutationen aus, indem Sie committen

RemoveDeviceFaultId({ commit }) { //commit('REMOVE_DEVICEFAULTID') wird später zum Löschen der Daten verwendet;
},
SetDeviceManageId({ commit }, id) {  
    commit('SET_DEVICEMANAGEID', id);
},

mutations : Daten ändern

REMOVE_DEVICEFAULTID: (Status) => {
      state.devicFaultId = null     
      Speicher.entfernen('devicFaultId');
},
SET_DEVICEMANAGEID: (Status, Geräteverwaltungs-ID) => {
      state.deviceManageId = Geräte-ManageId
      Speicher.set('deviceManageId', deviceManageId);
}

Status: Beim ersten Erstellen der Seite zwischengespeicherte Daten aus dem lokalen Speicher abrufen

devicFaultId: Storage.get('devicFaultId'),

Rufen Sie eine Detailseite auf und kehren Sie zurück

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

Wenn Sie auf andere Routen klicken, denken Sie daran, die zwischengespeicherten Daten zu löschen

dies.$store.dispatch('RemoveDeviceFaultId')

Auffüllen:

storage.js -Code

Nachdem Sie es in vuex eingeführt haben, können Sie es über Storage.set verwenden

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!