Ideen und Codes zur Implementierung der Vuex-Datenpersistenz

Was ist Vuex

vuex: ist ein speziell für vue.js entwickelter State Manager, der eine zentrale Speicherung aller Komponentenzustände nutzt

Fünf Attribute: Status, Getter, Mutationen, Aktionen, Modul

Grundlegende Verwendung:

Erstellen Sie eine neue Datei store.js, fügen Sie sie schließlich in main.js ein und hängen Sie sie in die reale Spalte ein

   Vue von „vue“ importieren
   Vuex von „vuex“ importieren
   Vue.Verwenden(Vuex)
   const Zustand = {}
   const getter = {}
   const Mutationen = {}
   const Aktionen = {}
   exportiere standardmäßig neuen Vuex.Store({
       Zustand,
       Getter,
       Mutationen,
       Aktionen
   
   })

Statusattribut: speichert den Status, z. B. die Daten, die Sie speichern möchten

Getter: Ähnlich wie bei gemeinsam genutzten Eigenschaften können Sie this.$store.getters verwenden, um die im Status gespeicherten Daten abzurufen

Mutationen: Die einzige Möglichkeit, den Status zu ändern, besteht darin, Mutationen zu übermitteln, this.$store.commit()

Aktionen: Einstufige Mutationen, die durch Dispatch verteilt werden können, um den Zustand zu ändern

Vuex-Datenpersistenz

Wie wir alle wissen, werden Vuex-Daten im Speicher abgelegt und gehen verloren, wenn Sie die Webseite aktualisieren. Wir hoffen, dass nach der Aktualisierung, für die eine Speicherung der Daten notwendig ist, noch einige Daten erhalten bleiben. Hier ist ein Datensatz zur Verwendung von localStorage zum Speichern der Daten in Vuex.

Umsetzungsideen

• Da die Daten im Status theoretisch nur durch Mutation aktualisiert werden können, können Sie auf Mutationsereignisse hören. Nachdem jedes Ereignis ausgeführt wurde, konvertieren Sie die gesamten Statusdaten zu diesem Zeitpunkt in eine Zeichenfolge und speichern Sie sie in localStorage.
• Wenn die Seite den Status initialisiert, lesen Sie den localStorage-Wert, konvertieren Sie ihn zurück in JSON und fügen Sie ihn in den aktuellen Status ein.
• Diese Methode ist nur eine einfache Implementierung und ist nur auf einfache Objekte anwendbar. Bei komplexen Objekten können bei der Rückkonvertierung in JSON die entsprechenden Ereignisse und Methoden verloren gehen. Sie können sie später auf andere Weise speichern.
  

Code

Plugins:

export default (Optionen = {}) => {
  const storage = options.storage || (Fenster && Fenster.localStorage);
  const key = options.key || "vuex";

  // Den Wert des Status abrufen const getState = (Schlüssel, Speicher) => {
    const-Wert = storage.getItem(Schlüssel);
    versuchen {
      Rückgabetyp des Wertes !== „undefiniert“? JSON.parse(Wert) : undefiniert;
    } fangen (Fehler) {
      konsole.warnen(fehler);
    }
    Rückgabe undefiniert;
  };

  // Setze den Wert des Status const setState = (Schlüssel, Status, Speicher) =>
    storage.setItem(Schlüssel, JSON.stringify(Status));

  return (speichern) => {
    // Daten während der Initialisierung abrufen. Falls vorhanden, ersetzen Sie den ursprünglichen Vuex-Status const data = Object.assign(store.state, getState(key, storage));
    wenn (Daten) {
      store.replaceState(Daten);
    }

    // Abonnieren Sie die Store-Mutation. Der Handler wird nach Abschluss jeder Mutation aufgerufen und erhält die Mutation und den Status nach der Mutation als Parameter store.subscribe((mutation, state) => {
      setState(Schlüssel, Status, Speicher);
    });
  };
};

Aufrufmethode:

importiere VuexPersist von "@/plugins/VuexPersist";

exportiere Standard createStore({
  Plugins: [VuexPersist()],
});

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung der Vuex-Datenpersistenz. Weitere relevante Inhalte zur Vuex-Datenpersistenz 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!