Vuex ist eine state Verwaltungsbibliothek für Vue.js Anwendungen, mit der Sie Daten über verschiedene s in Ihrer Anwendung hinweg verwalten und synchronisieren können component. Vuex implementiert die Flux-Architektur und ermöglicht so eine einfache und effiziente Verwaltung der Anwendung state.
Zu den Schlüsselkonzepten Vuex gehören:
1. State
Das state in Vuex stellt den zentralen Datenspeicher für Ihre Anwendung dar. Es enthält die Daten der Anwendung, die von verschiedenen s gemeinsam genutzt werden müssen component. Hier ist ein Beispiel für die Definition eines state in Vuex:
2. Mutations
Mutations state sind für die Änderung der in verantwortlich Vuex. Es handelt sich um synchrone Funktionen, die den Strom state und die Nutzlast als Argumente verwenden. Hier ist ein Beispiel für die Definition einer Mutation in Vuex:
3. Actions
Actions werden verwendet, um asynchrone Vorgänge abzuwickeln und zu versenden, mutations um die state. Sie können API-Aufrufe, asynchrone Aufgaben oder komplexe Logik enthalten. Hier ist ein Beispiel für die Definition einer Aktion in Vuex:
4. Getters
Getters state ermöglichen es Ihnen, abgeleitete Daten aus dem Speicher abzurufen und zu berechnen Vuex. Sie sind nützlich, um auf Daten zuzugreifen und sie zu bearbeiten, bevor sie an die component s zurückgegeben werden. Hier ist ein Beispiel für die Definition eines Getters in Vuex:
Zur Installation Vuex in Ihrem Vue.js Projekt können Sie die folgenden Schritte ausführen
Schritt 1: Installation Vuex über npm oder Yarn:
oder
Schritt 2: Erstellen Sie eine store.js
Datei im Stammverzeichnis Ihres Projekts. Hier deklarieren und verwalten wir den Antrag state.
Schritt 3: store.js
Importieren und erstellen Sie in der Datei Vuex ein neues Store-Objekt:
Schritt 4: Importieren Sie in der main.js
Datei den Store und verknüpfen Sie ihn mit Ihrer Vue-Anwendung:
Schritt 5: Vuex Jetzt haben Sie Ihr Projekt installiert und eingerichtet. Sie können Ihre state s, getters, mutations und actions in der store.js
Datei deklarieren und sie in Ihren Vue component s verwenden.
Beispiel:
In der store.js
Datei können Sie eine einfache state Mutation wie folgt deklarieren:
In einem Vue component können Sie die state Mutation „and“ verwenden, indem Sie die Funktionen „ and“ verwenden: mapState
mapMutations
Mit diesen Schritten haben Sie die Installation erfolgreich abgeschlossen und können damit Ihre Anwendung Vuex verwalten. state Vue.js
Mit Vuex können Sie die Anwendung einfach und konsistent verwalten state. Es verbessert die Wartbarkeit und Wiederverwendbarkeit des Codes und bietet gleichzeitig einen strukturierten Ansatz für die Datenverwaltung.