Vuex kombiniert Sitzungsspeicherdaten, um das Problem des Datenverlusts beim Aktualisieren der Seite zu lösen

Vorwort

Nach der Auswahl ändern sich im Formular Filterelemente im Projekt die Daten beim Aktualisieren der Seite und die von Ihnen ausgewählte Option bleibt nicht erhalten.
Vuex wird zum Speichern von Daten im Projekt verwendet, aber nach dem Aktualisieren der Webseite gehen die im Store gespeicherten Daten verloren.

Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden

1. Gründe:

Vuex ist ein globaler Datenstatusverwaltungsmechanismus. Die Daten im Store werden im laufenden Speicher gespeichert. Wenn die Seite aktualisiert wird, lädt die Seite die Vue-Instanz neu und die Daten im Store werden dem initialisierten Status neu zugewiesen.

2. Lösungsideen:

Verwenden Sie Vuex mit lokalem Speicher, um die Seite ohne Datenverlust zu aktualisieren

1. Lokale Speichermethode:

1. localStorage: Permanenter Speicher. Die im localStorage gespeicherten Daten verschwinden nicht nach dem Schließen der Seite oder des Browsers. Sofern Sie die Daten nicht aktiv löschen, werden sie nie verschwinden.
Am Beispiel des Chrome-Browsers werden die Daten unter C:\Benutzer\Ihr Computername\AppData\Local\Google\Chrome\Benutzerdaten\Default\Local Storage\leveldb abgelegt.
2. sessionStorage: Es ist nur in der aktuellen Sitzung gültig. Die Daten werden zerstört, wenn die aktuelle Seite oder der aktuelle Browser geschlossen wird. SessionStorage sind Daten, die immer im Fenster desselben Ursprungs vorhanden sind. Sie sind immer noch da, wenn die Seite aktualisiert wird, und werden gelöscht, wenn die aktuelle Seite geschlossen ist.
3. Cookie: Wenn Sie im Browser kein Ablaufdatum festlegen, wird das Cookie im Speicher abgelegt und sein Lebenszyklus endet mit dem Schließen des Browsers. Diese Art von Cookie wird als Session-Cookie bezeichnet. Wenn im Browser eine Ablaufzeit des Cookies eingestellt ist, wird das Cookie auf der Festplatte gespeichert. Nach dem Schließen des Browsers bleiben die Cookie-Daten bis zum Ablauf der Ablaufzeit bestehen. . Die Größe der in Cookies gespeicherten Daten beträgt etwa 4 KB, im Allgemeinen nicht mehr als 20, und es können keine großen Datenmengen gespeichert werden.

Erweiterung: Anwendungsszenarien für Cookies (1) Feststellen, ob sich der Benutzer bei der Website angemeldet hat, damit sich der Benutzer beim nächsten Mal automatisch anmelden kann (oder sich das Passwort merken kann). Wenn wir Cookies löschen, müssen Sie bei jeder Anmeldung die Anmeldeinformationen erneut eingeben.
(2) Speichern von Informationen wie beispielsweise dem Zeitpunkt der letzten Anmeldung.
(3) Speichern der zuletzt aufgerufenen Seite (Speichern der besuchten Routeninformationen)
(4) Browserverhaltensverfolgung (wie etwa Verfolgung und Analyse des Nutzerverhaltens usw.)
(5) Personalisierte Einstellungen (wie benutzerdefinierte Einstellungen, Designs usw.)

2. Schritte zur Umsetzung:

Da es sich bei Vue um eine Einzelseitenanwendung handelt, werden alle Vorgänge auf einer Seite ausgeführt und dieses Projekt wird nur im aktuell geöffneten Projekt verwendet. Daher ist die Verwendung von sessionStorage besser geeignet.

• Die Daten werden im Status gespeichert. Die Statusdaten werden durch die Mutationsmethode geändert. Wenn die Mutation den Status ändert, werden die Daten auch im SessionStorage gespeichert.
• Wenn das Projekt geöffnet wird, initialisieren Sie die Daten in App.vue. Wenn lokal gespeicherte Daten vorhanden sind, rufen Sie die Methode in Aktionen auf, um dem Status Werte zuzuweisen.
• Bei der Auswahl eines Formularelements werden gleichzeitig die Daten im Status geändert.

//store/selectData.js
const state = {//Daten gespeichert im Status dataList: {
    exchangeIdSum: null,
  }
}
const Mutationen = {
  setExchangeIdSum(state, data) { //Die ausgewählten Daten neu zuweisen und im SessionStorage speichern state.dataList.exchangeIdSum = data
    sessionStorage.setItem('Datenliste',JSON.stringify(Status.Datenliste))
  }
  setDataList(Status, Daten) {
    Zustand.Datenliste = JSON.parse(JSON.stringify(Daten))
  }
}
const Aktionen = {
  zurücksetzenDataList: ({commit}, list) => {
    setzeTimeout(() => {
      commit('setDataList', Liste)
    }, 2000);
  }
}
Standard exportieren {
  Zustand,
  Mutationen,
  Aktionen,
}

//Operationsmethoden auf der Formularfilterseite: {
  exchangeChange(val) {//Ändert die Daten im Status, wenn das Dropdown-Feld ausgewählt ist this.$store.commit('selectData/setExchangeIdSum', val)
  },
}
//App.vue in create(){//Sobald die Seite aufgerufen wird, wird festgestellt, ob Daten im sessionStorage vorhanden sind sessionStorage.getItem('dataList')?
  dies.$store.dispatch('selectData/resetDataList', JSON.parse(sessionStorage.getItem('dataList'))):{}
}

3. Optimierung:

Denn wenn zuvor Statusdaten geändert wurden, musste bei jeder Mutation der SessionStorage geändert werden. Wenn jedoch viele Statusdaten geändert werden müssen, wird der SessionStorage jedes Mal geändert, was etwas problematisch ist.

lösen:
① Sie können Daten direkt im SessionStorage speichern. ② Die Seite geht bei jeder Aktualisierung von Vue verloren. Sie können Daten im SessionStorage speichern, bevor Sie die Seite aktualisieren. Das Ereignis beforeunload kann vor dem Aktualisieren der Seite ausgelöst werden.

Damit ist dieser Artikel über die Verwendung von Vuex in Kombination mit Sitzungsspeicherdaten zur Lösung des Problems des Datenverlusts beim Aktualisieren einer Seite abgeschlossen. Weitere relevante Inhalte zu Vuex-Sitzungsspeicherdaten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!