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

Spezifische Verwendung von Bootstrap5-Haltepunkten und Containern

Inhaltsverzeichnis 1. Bootstrap5-Haltepunkte 1.1 ...

js Implementierung des Verifizierungscode-Falls

In diesem Artikelbeispiel wird der spezifische Co...

Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden

Ein einfaches MySQL-Vollsicherungsskript, das die...

js zur Implementierung einer Überprüfungscode-Interferenz (dynamisch)

In diesem Artikelbeispiel wird der spezifische Co...

In JavaScript integrierter Zeit- und Datumsformatierungsbeispielcode

1. Grundkenntnisse (Methoden von Datumsobjekten) ...

Multiservice-Image-Packaging-Vorgang von Dockerfile unter Aufsicht

Schreiben einer Docker-Datei Konfigurieren Sie di...

JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion

In diesem Artikel wird der spezifische JavaScript...

Eine kurze Diskussion über Flex-Layout und Skalierungsberechnung

1. Einführung in Flex Layout Flex ist die Abkürzu...

js verwendet die Reduce-Methode, um Ihren Code eleganter zu gestalten

Vorwort In tatsächlichen Projekten kann die häufi...