Zusätzliche Anweisungen zur Verwendung von Gettern und Aktionen in Vuex

Zusätzliche Anweisungen zur Verwendung von Gettern und Aktionen in Vuex

Vorbemerkungen

1.Unterschiede zwischen Vue2.x und Vue3.x:

  • In Vue 3.x gibt es keine Hilfsfunktionen.
  • Bei der sonstigen Verwendung von Vuex gibt es keinen Unterschied.

2. Hier erweitern und ergänzen wir nur die Verwendung einiger Attribute von Vuex.

Getter hinzugefügt

Wenn Getter in einem Untermodul geschrieben werden, hat die Methode im Getter-Attribut insgesamt 4 Parameter

Getter: {
	/**
	  * Parameterbeschreibung:
	  * Status: stellt den Status im aktuellen Modul dar
	  * getters: repräsentiert das Getter-Objekt im aktuellen Modul, im Allgemeinen andere Methoden derselben Ebene * rootState: repräsentiert das Satate-Objekt des Hauptmoduls * rootGetters repräsentiert das Getter-Objekt des Hauptmoduls *
	  * Das Hauptmodul ist - index.js */  
	getName(Zustand, Getter, Stammzustand, Stammgetter){
		// Anweisungen // Status und Getter können direkt aufgerufen werden // rootState.Modulname.Attributname // rootGetters['Modulname/Name der Getter-Methode unter diesem Untermodul']
		//Mit Ausnahme von state verwenden alle anderen Funktionen [''], was der Namenskonvention } entspricht.
	.......
}

Hinzugefügte Aktionen

Wenn Aktionen in ein Untermodul geschrieben werden, verfügt das erste context in der Aktionsmethode über 6 Objekte (es gibt noch weitere Eigenschaften, aber nur diese 6 stehen Entwicklern zur Verfügung).

Definition

// Aktionen in Untermodulen
Aktionen: {
	/**
	  * Parameter 1: Kontext ist ein Objekt. Wenn die aktuellen Aktionen in einem Untermodul definiert sind, 
	  * Der Kontext enthält die folgenden 6 Objekte, die Entwickler verwenden können * 
	  * 1. Commit: Mutationen aufrufen
	  * (1). Dieses Modul ruft auf: commit('Name der Mutationsmethode dieses Moduls', aktueller Parameter)
	  * (2). Andere Module rufen auf: commit('Modulname/Name der Mutationsmethode eines anderen Moduls', aktueller Parameter, {root: true}),
	  * {root:true} fester Parameter, bedeutet, es als Hauptmodul aufzurufen * 2. state: den Status des aktuellen Moduls abrufen
	  * 3. dispatch: rufe die Actions-Methode auf * (1). Dieses Modul ruft auf: dispatch('Name der Actions-Methode dieses Moduls', aktueller Parameter)
	  * (2). Aufrufe von anderen Modulen: dispatch('Modulname/Actions-Methodenname anderer Module', null, {root: true})
	  * 4. Getter: Holen Sie sich die Getter des aktuellen Moduls 
	  * 5. rootState: Status unter dem Hauptmodul
	  * 6. rootGetters: Getter unter dem Hauptmodul
	  *
	  * Parameter 2: Wert ist der Parameter, der beim Aufruf der Komponente übergeben wird */
	refreshUserName(Kontext, Wert){
	    setzeTimeout(()=>{
           store.commit('Mutationsmethodenname', tatsächlicher Parameterwert)  
       },2000)
	}
}

Aufruf (Vue3.x)

importiere { useStore } von 'vuex'
aufstellen(){
    const store = useStore()
    // speichern === dies.$store
    store.dispatch('Modulname/Name der Aktionsmethode', Parameterwert)
}

Wenn Sie während der Entwicklung die oben genannten 6 Objekte verwenden möchten, müssen Sie die erforderlichen Objekte über context. Sie können sie direkt durch Dekonstruktion abrufen

Das Folgende ist ein Beispiel von der offiziellen Website:

Oben finden Sie den detaillierten Inhalt der ergänzenden Anweisungen zur Verwendung von Gettern und Aktionen in Vuex. Weitere ergänzende Informationen zur Verwendung von Gettern und Aktionen in Vuex finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Anfordern von Dateninstanzen in Vuex-Aktionen in Vue
  • Detailliertes Beispiel für Vuex-Aktionen, die den Status asynchron ändern
  • Spezifische Verwendung des Aktionsattributs von Vuex
  • Detaillierte Erklärung der Verwendung von Aktionen beim Vuex-Lernen
  • Detailliertes Tutorial zur Verwendung von Aktionen in Vuex

<<:  Einführung und Analyse von drei Binlog-Formaten in MySQL

>>:  Analyse des Parameterübertragungsprozesses des Treibermoduls in Linux

Artikel empfehlen

Methode zur Änderung des MySQL-Kontokennworts (Zusammenfassung)

Vorwort: Bei der täglichen Verwendung der Datenba...

Vue verwendet das Video-Tag, um die Videowiedergabe zu implementieren

In diesem Artikel wird der spezifische Code von V...

So verwenden Sie tcpdump zum Erfassen von Paketen im Linux-System

Lassen Sie mich zunächst einen Blick auf den Beis...

Javascript implementiert einfache Navigationsleiste

In diesem Artikel wird der spezifische Code von J...

CSS3-Implementierungscode für einfaches Karussellbildschneiden

Umsetzungsideen Erstellen Sie zunächst einen über...

Detaillierte Erläuterung der Hosts-Dateikonfiguration auf einem Linux-Server

Konfiguration der Hostdatei des Linux-Servers Die...

So verwenden Sie Docker zum Bereitstellen eines Django-Technologie-Stack-Projekts

Mit der Popularität und Reife von Docker ist es a...

Tiefgreifendes Verständnis der Verwendung von r2dbc in MySQL

Einführung MySQL sollte eine sehr häufig verwende...

Docker ermöglicht mehrere Port-Mapping-Befehle

wie folgt: docker run -d -p 5000:23 -p 5001:22 --...