Tiefgreifendes Verständnis der Rolle von Vuex

Überblick

Wer vue.js verwendet hat, kennt sicher die Mühen der Werteübergabe zwischen Vue-Komponenten. Basierend auf übergeordneten und untergeordneten Komponenten mag es für uns sehr bequem sein, Werte zu übergeben, aber wenn nicht verwandte Komponenten denselben Datensatz verwenden möchten, erscheint es sehr hilflos. Vuex löst dieses Problem sehr gut. Daher muss Vuex beherrscht werden, und dies ist auch eine Frage, die bei Vorstellungsgesprächen unbedingt gestellt werden muss. Als Nächstes stellen wir kurz vor, wie Vuex den Status von Komponenten verwaltet.

So teilen Sie Daten zwischen Komponenten

Übergeben von Werten vom übergeordneten Element an das untergeordnete Element: v-bind-Attributbindung, Empfang von Requisiten; $parent / $children; $refs; $attrs / $listeners;

Kind übergibt Wert an Elternteil: v-on-Ereignisbindung, kombiniert mit $emit-Trigger; $parent / $children;

Daten zwischen Geschwisterkomponenten teilen: EventBus; Vuex

• $on Die Komponente, die die Daten empfängt
• $emit Die Komponente, die Daten sendet

Einführung in die Vuex-Prinzipien

Vuex implementiert einen unidirektionalen Datenfluss und verfügt über einen globalen Status zum Speichern von Daten. Wenn eine Komponente die Daten im Status ändern möchte, muss dies durch Mutationen erfolgen. Mutationen bieten auch einen Abonnentenmodus für externe Plug-Ins, die aufgerufen werden können, um Statusdatenaktualisierungen abzurufen. Wenn alle asynchronen Vorgänge (häufig zum Aufrufen von Backend-Schnittstellen zum asynchronen Abrufen von Daten verwendet) oder Batch-synchrone Vorgänge Aktionen durchlaufen müssen, können Aktionen den Status nicht direkt ändern. Es ist weiterhin erforderlich, die Methoden in Mutationen auszulösen und dann Mutationen durchzuführen, um die Statusdaten zu ändern. Wenn sich die Daten ändern, werden sie entsprechend an die Komponente gesendet und die Komponente in der Ansicht erneut gerendert.

Vuex ist der Statusmanager von Vue und reagiert auf die gespeicherten Daten. Es wird jedoch nicht gespeichert. Nach dem Aktualisieren wird der ursprüngliche Zustand wiederhergestellt. Die spezifische Methode besteht darin, die Daten zu kopieren und in localStorage zu speichern, wenn sich die Daten in vuex ändern. Wenn nach dem Aktualisieren gespeicherte Daten in localStorage vorhanden sind, nehmen Sie diese heraus und ersetzen Sie den Zustand im Store.

Vuex ist ein Mechanismus zur Verwaltung des globalen Komponentenstatus (Daten).

Es ist einfach, Daten zwischen Komponenten auszutauschen

Die Vorteile der Verwendung von Vuex zur einheitlichen Statusverwaltung:

• Möglichkeit zur zentralen Verwaltung gemeinsam genutzter Daten in Vuex, was Entwicklung und Wartung vereinfacht
• Effizienter Datenaustausch zwischen Komponenten und Verbesserung der Entwicklungseffizienz
• Die in Vuex gespeicherten Daten reagieren und können die Daten und die Seite in Echtzeit synchronisieren.

Welche Art von Daten eignet sich für die Speicherung in Vuex?

Generell müssen nur die zwischen den Komponenten gemeinsam genutzten Daten in Vuex gespeichert werden; private Daten der Komponenten können weiterhin in den eigenen Daten der Komponente gespeichert werden.

• Mehrere Ansichten basieren auf demselben Status: Beispielsweise werden Daten zwischen mehreren Komponenten gemeinsam genutzt und Benutzerinformationen können auf verschiedenen Seiten abgerufen werden.
• Verhaltensweisen aus verschiedenen Ansichten müssen denselben Status ändern: Beispielsweise können Benutzermitgliedschaftsinformationen auf verschiedenen Seiten geändert werden

Grundlegende Verwendung von Vuex

1. Installieren Sie das Vuex-Abhängigkeitspaket

npm installiere vuex --save

Fügen Sie unbedingt –save hinzu, da dieses Paket auch in einer Produktionsumgebung verwendet wird.

2. Importieren Sie das Vuex-Paket

Vue von „vue“ importieren
Vuex von „vuex“ importieren
// Berg Vuex
Vue.Verwenden(Vuex)

3. Erstellen Sie ein Store-Objekt

const store = neuer Vuex.Store({
  // Der Status speichert den global freigegebenen Datenstatus: {
    Anzahl: 0
  }
})
Standardspeicher exportieren;

4. Mounten Sie das Store-Objekt in die Vue-Instanz

neuer Vue({
    el: '#app',
    rendern: h => h(App),
    Router,
    //Mounten Sie das erstellte Shared Data-Objekt in die Vue-Instanz //Alle Komponenten können globale Daten aus dem Store abrufen
})

Die wichtigsten Kernkonzepte in Vuex

1. Staatliches Data Warehouse

State stellt eine einzigartige öffentliche Datenquelle bereit und alle freigegebenen Daten werden im State of the Store gespeichert.

Die erste Möglichkeit für eine Komponente, auf Daten im Status zuzugreifen: this.$store.state.global Datenname

Die zweite Möglichkeit für Komponenten, auf Daten im Status zuzugreifen:

// 1. Importieren Sie die mapState-Funktion bei Bedarf von vuex import { mapState } from 'vuex'

// 2. Ordnen Sie über die gerade importierte mapState-Funktion die von der aktuellen Komponente benötigten globalen Daten den berechneten Eigenschaften der aktuellen Komponente zu: {
    ...mapSate(['Anzahl'])
}

2. Mutation

Mutation wird verwendet, um die Daten im Store zu ändern.

Sie können die Store-Daten nur durch Mutation ändern, Sie können die Daten im Store nicht direkt bearbeiten, Sie ändern sie, indem Sie eine Mutation durchführen, das Wesentliche ist eigentlich eine Funktion

Zwar ist diese Methode in der Handhabung etwas komplizierter, dafür können damit die Änderungen aller Daten zentral überwacht werden.

Mutationsoperationen müssen synchron sein

Jedes Mal, wenn wir eine Mutation übermitteln, wird ein Datensatz erstellt. Vuex tut dies, um den Verlauf und die Nachverfolgung jeder Datenänderung bequemer aufzuzeichnen, was für Überwachungs- und Rollback-Vorgänge praktisch ist.

Der erste Weg, Mutationen auszulösen:

// Mutation in store.js definieren
const store = neuer Vuex.Store({
    Zustand: {
        Anzahl: 0
    },
    Mutationen:
        hinzufügen(Zustand) {
            state.count++ //Status ändern}
    }
})

// Mutation in Komponente auslösen
Methoden: {
    handhaben() {
        // Die erste Methode zum Auslösen von Mutationen this.$store.commit('add')
    }
}

Übergeben Sie Parameter beim Auslösen von Mutationen:

//store.js
Mutationen:
    addN(state, step) { //Der erste Parameter ist state, und die folgenden Parameter sind zusätzliche Parameter, die von store.commit übergeben werden, d.h. die Nutzlast der Mutation
        Zustand.Anzahl += Schritt
    }
}

// In der Komponente this.$store.commit('addN', 3) // Rufe die Commit-Funktion und Carry-Parameter auf, wenn Mutationen ausgelöst werden

Der zweite Weg, Mutationen auszulösen:

// 1. Importieren Sie die Funktion mapMutations bei Bedarf von vuex import { mapMutations } from 'vuex'

// 2. Verwenden Sie die neu importierte Funktion mapMutations, um die angegebene Mutationsfunktion der Methodenfunktion der aktuellen Komponentenmethoden zuzuordnen: {
    ...mapMutations(['Hinzufügen', 'addN'])
}

Hinweis: Führen Sie keine asynchronen Operationen in Mutationsfunktionen durch, wie z. B. das Hinzufügen von Verzögerungen

3. Aktion

Action wird zum Verarbeiten asynchroner Aufgaben verwendet.

Wenn Sie Daten durch asynchrone Vorgänge ändern möchten, müssen Sie eine Aktion anstelle einer Mutation verwenden. Sie müssen die Daten in einer Aktion jedoch weiterhin indirekt ändern, indem Sie eine Mutation auslösen.

Die erste Möglichkeit zum Auslösen von Aktionen:

//Aktion in store.js definieren
const store = neuer Vuex.store({
    //...Andere Codeaktionen weglassen: {
        addAsync(Kontext, Nutzlast) {
            setzeTimeout(() => {
                Kontext.Commit('Hinzufügen')
            }, 1000)
        }
    }
})

// Aktion in Komponente auslösen
Methoden: {
    handhaben() {
        dies.$store.dispatch('addAsync', 3)
    }
}

Hinweis: Führen Sie keine asynchronen Operationen in Mutationsfunktionen durch, wie z. B. das Hinzufügen von Verzögerungen

Nur in Mutationen definierte Funktionen haben das Recht, Daten im Status zu ändern. Daten im Status können in Aktionen nicht direkt geändert werden und eine Mutation muss über context.commit ausgelöst werden.

Kontext: Kontextobjekt, entspricht diesem in der Pfeilfunktion, hat dieselben Eigenschaften und Methoden wie die Store-Instanz

Nutzlast: die eingebundenen Parameter

Die zweite Möglichkeit Aktionen auszulösen:

// 1. Importieren Sie die mapActions-Funktion bei Bedarf von vuex import { mapActions } from 'vuex'

// 2. Verwenden Sie die neu importierte Funktion mapActions, um die angegebene Aktionsfunktion der Methodenfunktion der aktuellen Komponentenmethoden zuzuordnen: {
    ...mapActions(['addAsync', 'addN'])
}

4. Getter

Getter wird verwendet, um die Daten im Store zu verarbeiten und neue Daten zu bilden. Der Getter ändert die Originaldaten im Store nicht, er fungiert nur als Wrapper.

Getter kann die vorhandenen Daten im Store verarbeiten, um neue Daten zu bilden, ähnlich den berechneten Eigenschaften von Vue.

Wie berechnete Eigenschaften wird der Rückgabewert eines Getters basierend auf seinen Abhängigkeiten zwischengespeichert und nur neu berechnet, wenn sich die Werte seiner Abhängigkeiten ändern. Das heißt, wenn sich die Daten im Store ändern, ändern sich auch die Daten im Getter.

// Getter definieren 
const store = neuer Vuex.store({
    Zustand: {
        Anzahl: 0
    },
    getters: { // Echtzeitüberwachung von Statuswertänderungen showNum: state => {
            return 'Die aktuell neueste Zahl ist [' + state.count + ']'
        }
    }
})

Die erste Möglichkeit, Getter zu verwenden: this.$store.getters.name

Die zweite Möglichkeit mit Gettern:

importiere { mapGetters } von 'vuex'

berechnet: {
    ...mapGetters(['showNum'])
}

Das Obige ist der detaillierte Inhalt für ein tieferes Verständnis der Rolle von Vuex. Weitere Informationen zu Vuex finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!