Detaillierte Erklärung der Getter-Verwendung in vuex

Vorwort

Mit Vuex können wir im Store „Getter“ definieren (die man sich als berechnete Eigenschaften des Stores vorstellen kann). Genau 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.

Nehmen wir als Beispiel die offizielle Website. Der Code der offiziellen Website lautet wie folgt:

Verwenden Sie den folgenden Code, um in der Komponente darauf zuzugreifen:

dies.$store.getters.doneTodosCount

1. Beschreibung

Die Accessor-Funktion in Gettern übergibt standardmäßig zwei Parameter (Status, Getter). Der erste Parameter Status kann verwendet werden, um auf die Daten zuzugreifen, und der Getter-Parameter kann verwendet werden, um auf andere Accessor-Funktionen im Accessor zuzugreifen. In den meisten Fällen wird nur der erste Parameter benötigt. Wenn Sie eine Accessor-Funktion definieren, schreiben Sie einfach den ersten Parameter, wie im obigen Beispiel. Beim Zugriff auf diese Accessor-Eigenschaften werden sie wie berechnete Eigenschaften in der Komponente aufgerufen und nicht wie Funktionsaufrufe.

Dies ist ein Beispiel für die Verwendung des zweiten Parametergetters. Verwenden Sie den folgenden Code direkt in der Komponente, um ihn aufzurufen, genau wie beim Aufrufen einer berechneten Eigenschaft. Der zweite Parameter wird standardmäßig übergeben.

this.$store.getters.doneAlle

2. Getter gibt eine Funktion zurück

Die Übergabe von Parametern an den Getter erfolgt dadurch, dass der Getter eine Funktion zurückgibt. Daher besteht seine Hauptfunktion darin, Parameter zu übergeben.

Wenn in einer Komponente direkt auf this.$store.getters.getTodoById zugegriffen wird, wird eine Funktion zurückgegeben. Übergeben Sie dann die Parameter durch Aufruf der Funktion und Sie erhalten das Ergebnis der Funktion.

3. Erweitern Sie mit dem MapGetters-Objekt

In den berechneten Eigenschaften der Komponente können Sie mit der folgenden Methode direkt und einfach auf die Getter-Eigenschaft verweisen und sie dann genauso verwenden, als würden Sie eine normale berechnete Eigenschaft aufrufen.

Wenn Sie einer Getter-Eigenschaft einen anderen Namen geben möchten, verwenden Sie die Objektform:

Es ist möglicherweise schwierig, diese Wissenspunkte zu verstehen, wenn man die Dokumente nur liest, sie können jedoch durch manuelles Üben leicht erfasst und verstanden werden.

Vuex Getter-Parameterübergabemethode

Getter: {
    getProductByid: (Status) => (ID) =>
    {
        gibt status.productList.find zurück (Artikel => Artikel-ID === ID);
    }
}

Beim Aufruf mithilfe des Namespace:

dies.$store.getters['IhrNamensraum/getProductByid'](id);

Aufruf ohne Namespace:

dies.$store.getters.getProductByid(id);

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Getter in Vuex. Weitere relevante Inhalte zur Verwendung von Vuex Getter finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!