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

Was sind HTML-Inline-Elemente und Block-Level-Elemente und ihre Unterschiede

Ich erinnere mich an eine Frage, die der Intervie...

Im Mybatis MySQL-Löschvorgang kann nur die erste Datenmethode gelöscht werden

Insekten Wie in der Abbildung gezeigt, begann ich...

Überwachung sowie Betrieb und Wartung von Linux-Diensten

Inhaltsverzeichnis 1. Installieren Sie das psutil...

Detaillierte Erläuterung der Kapselung von JavaScript-Animationsfunktionen

Inhaltsverzeichnis 1. Prinzip der Animationsfunkt...

MySQL-Einschränkungstypen und Beispiele

Zwang Einschränkungen gewährleisten Datenintegrit...

Lebenszyklus und Hook-Funktionen in Vue

Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....

Beispiel für die reguläre Umschreibmethode für Nginx Rewrite (Matching)

Die Rewrite-Funktion von Nginx unterstützt regelm...

Detaillierte Erklärung der benutzerdefinierten Swiper-Komponente in JavaScript

Inhaltsverzeichnis Effektanzeige Komponenteneinst...

So stellen Sie Confluence und Jira-Software in Docker bereit

Version: centos==7.2 jdk==1.8 Zusammenfluss == 6....

So passen Sie einen EventEmitter in node.js an

Inhaltsverzeichnis Vorwort 1. Was ist 2. So verwe...