Zwei Implementierungslösungen für die Vuex-Datenpersistenz

Geschäftsanforderungen:

Um das Problem des Datenverlusts nach der Seitenaktualisierung zu lösen, speichern wir bei der Entwicklung von SPA-Projekten auf Basis von Vue die Daten im Allgemeinen im lokalen Speicher oder im Sitzungsspeicher. Wenn Daten global verarbeitet und einheitlich verwaltet werden müssen, verwenden wir zur einheitlichen Datenverwaltung auch das offiziell von Vue bereitgestellte Vuex. Im Vergleich zu LocalStorage oder SessionStorage ist Vuex bei der Datenspeicherung sicherer. Gleichzeitig hat vuex auch einige Nachteile. Wenn die Seite aktualisiert wird, werden auch die im Status von vuex gespeicherten Daten aktualisiert. Die in vuex gespeicherten Daten können nicht dauerhaft gespeichert werden, und es ist eine Überwachungsverarbeitung erforderlich, um die Beständigkeit des in vuex gespeicherten Datenstatus aufrechtzuerhalten.

Um das Problem zu lösen, dass der in Vuex gespeicherte Datenstatus nach dem Aktualisieren der Seite nicht beibehalten werden kann, besteht die von mir gewählte Lösung darin, ein Plug-In-Tool eines Drittanbieters zu verwenden, um die dauerhafte Speicherung von Vuex-Daten zu realisieren und so das Problem der Datenaktualisierung nach dem Aktualisieren der Seite zu lösen.

Lösung 1: vuex-persistedstate

Installieren Sie das Plugin

Garn fügt Vuex-Persistedstate hinzu
// oder npm install --save vuex-persistedstate

Anwendung

importiere Vuex von „vuex“;
// Importieren Sie das Plugin „import createPersistedState from "vuex-persistedstate";“

Vue.use(Vuex);

konstanter Zustand = {};
const-Mutationen = {};
const-Aktionen = {};

const store = neuer Vuex.Store({
	Zustand,
	Mutationen,
	Aktionen,
  /* Vuex-Datenpersistenzkonfiguration */
	Plugins: [
		erstellePersistedState({
      // Speichermethoden: localStorage, sessionStorage, Cookies
			Speicher: window.sessionStorage,
      // Der Schlüsselwert des gespeicherten Schlüssels key: "store",
			rendern(Zustand) {
        //Zu speichernde Daten: Dieses Projekt verwendet den es6-Erweiterungsoperator, um alle Daten im Status „return { ...state }“ zu speichern.
			}
		})
	]
});

Standardspeicher exportieren;

Dauerhafte Speicherung von Moduldaten in Vuex

/* modul.js */
exportiere const dataStore = {
  Zustand: {
    Daten: []
  }
}
 
/* store.js */
importiere { dataStore } aus './module'
 
const dataState = createPersistedState({
  Pfade: ['Daten']
});
 
exportiere neuen Vuex.Store({
  Module:
    Datenspeicher
  },
  Plugins: [Datenstatus]
});

Notiz:

1. Speicher ist die Speichermethode und die optionalen Werte sind localStorage, sessionStorage und Cookies;
2. Die Speichermethoden localStorage und sessionStorage können im obigen Code geschrieben werden. Wenn Sie Cookies zum Speichern von Daten verwenden möchten, benötigen Sie eine andere Möglichkeit, diese zu schreiben.
3. Render empfängt eine Funktion und gibt ein Objekt zurück. Die Schlüssel-Wert-Paare im zurückgegebenen Objekt sind die Daten, die dauerhaft gespeichert werden sollen.
4. Wenn Sie einige Daten dauerhaft speichern möchten, verwenden Sie Schlüssel-Wert-Paare, um Daten im zurückgegebenen Objekt zu speichern. Der Parameter in der Renderfunktion ist das Statusobjekt.

Lösung 2: vuex-persist

Installieren Sie das Plugin

Garn hinzufügen Vuex-Persist
// oder npm install --save vuex-persist

Anwendung

importiere Vuex von „vuex“;
// Importieren Sie das Plugin „import VuexPersistence from "vuex-persist";“

Vue.use(Vuex);
// Initialisieren const state = {
	Benutzername: „admin“
};
const-Mutationen = {};
const-Aktionen = {};
// Eine Instanz erstellen const vuexPersisted = new VuexPersistence({
	Speicher: window.sessionStorage,
  rendern:Zustand=>({
  	Benutzername:Bundesstaat.Benutzername
    // oder...Zustand
  })
});

const store = neuer Vuex.Store({
	Zustand,
  Aktionen,
  Mutationen,
  //Plugins für Datenpersistenzeinstellungen: [vuexPersisted.plugins]
});

Standardspeicher exportieren;

Eigenschaftenmethoden

Zusammenfassen

Die beiden oben genannten Lösungen können die dauerhafte Speicherung von Vuex-Daten realisieren. Lösung 1 ist das, was ich im eigentlichen Entwicklungsprozess verwendet habe, und Lösung 2 ist das, was ich auf Github gesehen habe. Im Allgemeinen können beide die endgültigen Anforderungen der Zeit erfüllen, und es gibt entsprechende Falldemos als Referenz. Im Vergleich dazu ist die Anzahl der Starts für Lösung 1 auf GitHub höher als die für Lösung 2.

Wählen Sie bitte je nach konkreter Situation die für Sie passende Lösung!

Damit ist dieser Artikel über zwei Implementierungslösungen für die Vuex-Datenpersistenz abgeschlossen. 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!