Über die 4 Zusatzfunktionen von Vuex

1. Zusatzfunktionen

Wenn eine Komponente mehrere Zustände abrufen muss, wäre die Deklaration aller dieser Zustände als berechnete Eigenschaften etwas repetitiv und redundant. Um dieses Problem zu lösen, können wir die Hilfsfunktion mapState verwenden, die uns beim Generieren berechneter Eigenschaften hilft und Ihnen so einige Tastenanschläge erspart.

Hilfsfunktionen ins Script einbauen:

importiere { mapState, mapMutations, mapActions, mapGetters } von 'vuex'

2. Beispiele

1. mapState und mapGetters

Da state und getters Eigenschaften, also bestimmte Werte, zurückgeben, sollten mapState und mapGetters in der berechneten Eigenschaft computed platziert werden.

Zum Beispiel:

Jetzt gibt es eine Eigenschaft userName im Store-Status:

In der Home.vue-Komponente wird es über mapState abgerufen und auf der Schnittstelle angezeigt:

Berechneter Code:

  berechnet:{
    // Den Status im Store über die Hilfsfunktion abrufen
    ...mapState(['Benutzername'])
    //Entspricht: dem folgenden regulär berechneten Eigenschaftscode /* userName (){
      gib dies zurück.$store.state.userName
    }*/
  }

Aufruf der Seite:

Ergebnis:

Auf diese Weise können Sie ein einfaches ...mapState(['userName']) verwenden, um die relativ lange berechnete Eigenschaftsfunktion zu ersetzen.
Die Verwendung von mapGetters ist die gleiche wie die von mapState . Sie können es in computed aufrufen. Hier nehmen wir nur mapState als Beispiel.

2. mapMutations und mapActions

Da mutations und actions Funktionen zurückgeben, sollten sie in der Methodeneigenschaft der Komponente platziert werden.

Zum Beispiel:

Jetzt gibt es in store mutations des Stores eine Tippfunktion, die ein Willkommensfenster für den aktuellen Benutzer öffnet:

Der Code in methods in der obigen Abbildung ist eine Abkürzung zum Abrufen der Mutation im Speicher.

  Methoden:{
    //Abkürzung für das Abrufen von Mutationen im Store
    …mapMutations(['Tipp'])
    //Entspricht /* tip(){
      dies.$store.commit('Tipp');
    }*/
  }

Aufruf in Komponente: Rufen Sie die Tippmethode in der created Funktion auf, um das Willkommens-Popup-Fenster zu implementieren.

Die Verwendung von mapActions und mapMutations ist identisch, d. h. sie können in nethods deklariert werden, was die Referenzierung von Aktionen und Mutationen im Store vereinfacht.

Wie Sie dem obigen Beispiel entnehmen können, liegt der Nutzen von Hilfsfunktionen darin, dass sie uns dabei helfen, das Abrufen von Status, Getter, Mutation und Aktion im Store zu vereinfachen. Natürlich können die oben genannten Funktionen auch ohne die Verwendung von Hilfsfunktionen erreicht werden, wenn jedoch in einer Komponente mehrere Zustände gleichzeitig verwendet werden müssen, sind Hilfsfunktionen praktischer.

Damit ist dieser Artikel über die vier Zusatzfunktionen von Vuex abgeschlossen. Weitere relevante Inhalte zu Vuex-Zusatzfunktionen 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!