Was sind die Nutzungsszenarien und Eigenschaften von Vuex?

青灯夜游
Freigeben: 2023-01-11 09:20:19
Original
4668 Leute haben es durchsucht

Vuex-Nutzungsszenarien: 1. Modul zur Verwaltung persönlicher Informationen des Benutzers; 2. Modul „Mein Warenkorb“ für E-Commerce-Projekte; 4. Auf der Bestellabwicklungsseite; Die Vuex-Attribute sind: 1. Zustand, verwendet zum Speichern von Variablen; 3. Mutationen; 5. Module;

Was sind die Nutzungsszenarien und Eigenschaften von Vuex?

Die Betriebsumgebung dieses Tutorials: Windows7-System, Version vue2.9.6 und vuex4.0.2, DELL G3-Computer.

Was ist Vuex?

vuex ist ein Plug-in zur Verwaltung der Kommunikation zwischen Komponenten. Es handelt sich um ein Zustandsverwaltungsmodell, das speziell für [vue.js]-Anwendungen entwickelt wurde. Es löst das Problem der gemeinsamen Nutzung desselben Zustands zwischen Komponenten und kann den Zustand verbessern außerhalb der Komponente verwaltet werden.

Warum brauchen Sie Vuex?

Wenn mehrere Komponenten vom gleichen Zustand abhängen, wird die Methode der Parameterübergabe aufgrund der Verschachtelung zwischen mehreren Komponentenschichten komplizierter. Darüber hinaus werden Eltern-Kind-Komponenten verwendet, um den Zustand direkt zu trinken oder zu ändern und zu synchronisieren Ereignisse: Phenolisches Kopieren macht das Muster spröde und macht den Code nicht mehr wartbar.

Wann und unter welchen Umständen sollte ich vuex verwenden?

Beim Erstellen einer mittelgroßen bis großen Einzelseitenanwendung müssen Sie überlegen, wie Sie den Zustand außerhalb der Komponente besser verwalten können.

Hinweis: Wenn Sie keine große Einzelseitenanwendung entwickeln, kann die Verwendung von vuex umständlich und überflüssig sein. Das heißt, ein Projekt, das schnell entwickelt werden kann, wird nach der Verwendung von vuex kompliziert. Im Allgemeinen reicht ein einfacher Speichermodus aus.

Die fünf Hauptattribute von Vuex

Zustand, Getter, Mutationen, Aktionen, Module.

1. Zustand: Grunddaten von Vuex, die zum Speichern von Variablen verwendet werden , muss synchron sein (wenn Sie die Aktion asynchron verwenden müssen). Jede Mutation verfügt über einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler).

Mit der Rückruffunktion ändern wir tatsächlich den Status. Sie akzeptiert den Status als ersten Parameter und übermittelt die Nutzlast als zweiten Parameter.

4. Die Funktion ist ungefähr die gleiche wie bei der Mutation. Der Unterschied ist ==》1. Die Aktion übermittelt die Mutation, anstatt den Zustand direkt zu ändern. 2. Aktion kann jede asynchrone Operation enthalten.

5. Module: Modulares Vuex ermöglicht es jedem Modul, seinen eigenen Status, seine eigene Mutation, seine eigene Aktion und seine eigenen Getter zu haben, wodurch die Struktur sehr klar und einfach zu verwalten ist.

vuex-Nutzungsszenarien:

Das Warenkorbmodul von E-Commerce-Projekten wird jedes Mal aufgerufen (Voraussetzung) und das Der Effekt ist, dass es implementiert ist, aber jede HTTP-Anfrage verbraucht die Browserleistung. Im Gegensatz dazu ist die Verwendung von Vuex-Mutationen zum Auslösen vorteilhafter.

    In meinem Bestellmodul klickt die Bestellliste auch, um die Bestellung zu stornieren, und aktualisiert dann die entsprechende Bestellliste Status. Überwachen Sie diesen Status und aktualisieren Sie die entsprechende Liste, wenn er sich ändert.
  • Rufen Sie auf der Bestellabwicklungsseite die Coupon-Auswahlseite auf und wählen Sie die Coupon-Seite aus. Wie speichere ich ausgewählte Couponinformationen? Der Staat speichert die Coupon-Informationen. Auf der Bestellabrechnungsseite werden die ausgewählten Coupon-Informationen abgerufen. Verwandte Empfehlungen: „
  • vue.js Tutorial“

Das obige ist der detaillierte Inhalt vonWas sind die Nutzungsszenarien und Eigenschaften von Vuex?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage