Die vue-cli-Konfiguration verwendet den vollständigen Prozessdatensatz von Vuex

Vorwort

Bei der Vue-Entwicklung verwenden wir häufig globale Daten wie Benutzerinformationen, Benutzerberechtigungen, bestimmte Status usw. Unsere herkömmlichen Daten sind unidirektional, daher müssen wir sie Schicht für Schicht weitergeben. Wenn wir also auf Daten stoßen, die von mehreren Komponenten gemeinsam genutzt werden, sind diese unidirektionalen Daten schwer zu verwalten. Beispielsweise ist eine Komponente in vielen Schichten verschachtelt, aber die Datenänderungsmethode muss Schicht für Schicht weitergegeben werden. Zu diesem Zeitpunkt können wir Vuex vorstellen.

vuex ist ein speziell für Vue.js-Anwendungen entwickeltes Zustandsverwaltungsmuster. Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen.

Die folgende Abbildung ist ein Flussdiagramm zur Verwaltung eines gemeinsamen Status zwischen Komponenten auf der offiziellen Vuex-Website

Installation und Verwendung

Wir können einfach npm oder yarn verwenden, um es in dem von uns initialisierten Vue-CLI-Projekt zu installieren.

npm install vuex --save // ​​​​Garn fügt vuex hinzu

Dann verwalten wir unseren Status, erstellen einen neuen Store-Ordner in der src-Datei im Stammverzeichnis, erstellen dann index.js als Einstiegsdatei unter dem Store und schreiben dann unseren globalen Status.

Der Status ist hier der globale Status. Getter können für einige von uns abgeleitete Status verwendet werden. Beispielsweise müssen wir die Anzahl im Status teilen, und dann sind Mutationen Methoden zum Ändern des Status. Der erste Parameter ist unser Statusobjekt und der zweite Parameter ist der Wert, den ich übergeben kann. Schließlich übermitteln die Aktionen hier Mutationen, anstatt den Status direkt zu ändern. Die Aktion hier kann eine asynchrone Funktion sein. Der erste Parameter der Aktionsfunktion erhält eine Kontextfunktion, die mit Methoden und Eigenschaften mit der Store-Instanz kommuniziert, und der zweite ist das, was wir übergeben.

Verwenden Sie den Status auf der Seite, leiten Sie den Status über Getter ab und ändern Sie die Statusdaten über Action Dispatch

Hier führe ich den entsprechenden Status, die vom Getter abgeleiteten Daten, die Mutation und die Aktion über mapState, mapGetters, mapMutations und mapActions in vuex ein und kann sie dann direkt auf der Vue-Instanz verwenden. Natürlich können wir den von uns definierten Store auch direkt einführen und den gewünschten Status, die gewünschte Aktion und die gewünschte Mutation über die Store-Instanz abrufen.
Die Wirkung ist wie folgt

Persönlich finde ich, dass die Methode, Vuex in Kombination mit der Einführung am Anfang der Karte zu verwenden, eleganter ist, deshalb habe ich auch diese Methode verwendet. Weitere Referenzdefinitionsmethoden finden Sie in den Beispielen auf der offiziellen Vuex-Website. Ich habe nur ein Formular verwendet, das ich normalerweise verwende.

Offizielle Vuex-Dokumentation: vuex.vuejs.org/zh/guide/ac…

Modulares Management

Wenn unser Status umfangreicher wird, kann das Store-Objekt sehr aufgebläht werden. Daher muss ich eine modulare Verwaltung verwenden, um unsere Statusdateien in separaten Dateien zu verarbeiten, was für unsere Wartung förderlicher ist.

Ändern Sie die Verzeichnisstruktur unter unserer Store-Datei, erstellen Sie ein Modulverzeichnis und erstellen Sie in diesem Verzeichnis eine main.js.

Das geänderte Verzeichnis wird in der Abbildung angezeigt, getters.js sind einige der Zustände, die wir abgeleitet haben.

Ändern Sie dann den Code unserer Datei index.js wie folgt

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Getter aus „./getters“ importieren

Vue.Verwenden(Vuex)

const Kontext = erfordern.context('./modules', false, /\.js$/)
const moduleStores = {}

Kontext.Schlüssel().fürJeden(Schlüssel => {
    // Den gelesenen Dateinamen und die Intercept-Datei abrufen const fileName = key.slice(2, -3);

    //Dateiinhalte über Kontext (Schlüssel) exportieren const fileModule = Kontext (Schlüssel).default

    moduleStores[Dateiname] = {
        …Dateimodul
    }
})

const store = neuer Vuex.Store({
  Module:
    ...ModuleStores,
  },
  Getter
})

Standardspeicher exportieren

Hier verwenden wir die API von webpack, um das von uns erstellte Modul automatisch zu importieren

Dann ist die Verwendung unserer Komponentenseite im Grunde dieselbe wie zuvor, nur dass wir einige Statuswerte mithilfe von mapState ändern. Da wir es über das Modul importieren, möchten wir jetzt die Anzahl unter main im Store abrufen, sodass der geänderte mapState wie folgt eingeführt und verwendet wird

Jetzt haben wir eine modulare Verwaltungsmethode verwendet. Wenn wir beispielsweise eine neue Statusbibliothek erstellen möchten, müssen wir sie nur unter Modulen erstellen und das Dateiformat wird in Form von main.js exportiert.

Persistenz des Vuex-Zustands

Wenn wir Vuex als Statusverwaltung verwenden, aktualisieren wir den Browser und die Vuex-Daten verschwinden. Zu diesem Zeitpunkt benötigen wir einen Datenpersistenzvorgang, z. B. das Speichern unserer Daten im lokalen Speicher, was realisierbar ist. Wenn wir jedoch viele Store-Module haben, kann dies problematisch sein. Daher haben wir die Plug-In-Bibliothek vuex-persistedstate von Drittanbietern eingeführt.

Um es zu verwenden, importieren Sie es einfach in index.js in unserem Store-Verzeichnis und verwenden Sie es in new Stroe wie folgt

Hier können wir die Methode createPersistedState verwenden, die wir in Plugins eingeführt haben. Die direkte Einführungsmethode besteht darin, dass alle unsere Zustände beibehalten werden. Natürlich können wir auch die Konfiguration ändern und einen Zustand festlegen, den wir beibehalten möchten, um ihn beizubehalten. Ich habe die spezifische Konfiguration hier nicht geschrieben. Sie können sich auf die offizielle Konfiguration von vuex-persistedstate beziehen.

Github-Adresse von vuex-persistedstate: github.com/robinvdvleu…

Zusammenfassen

Hier stelle ich nur kurz die Verwendung von Vuex vor. Eine genauere Verwendung finden Sie auf der offiziellen Website. Vuex erleichtert uns die Verwaltung einiger globaler Zustände, wie etwa Benutzerinformationen und Routen, die beim dynamischen Laden von Routen gespeichert werden. Bei der Verwendung in einem kleinen Projekt kann es die Komplexität erhöhen. Versuchen Sie daher bereits im Frühstadium des Projekts, die Verzeichnisstruktur und Datenstruktur Ihres Projekts zu planen. Dies ist für die schnelle Entwicklung und Wartung eines Projekts sehr wichtig.

Dies ist das Ende dieses Artikels zur Konfiguration von Vue-cli zur Verwendung von Vuex. Weitere Informationen zur Konfiguration von Vue-cli zur Verwendung von Vuex 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!