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

Zusammenfassung der Methoden zum Schreiben von Urteilsaussagen in MySQL

So schreiben Sie Urteilsaussagen in MySQL: Method...

Erläuterung des TypeScript-Namespace

Inhaltsverzeichnis 1. Definition und Verwendung 1...

Ein kurzes Verständnis des Unterschieds zwischen MySQL Union All und Union

Union ist eine Vereinigungsoperation für die Date...

Einige etwas komplexere Verwendungsbeispielcodes in MySQL

Vorwort Ich glaube, dass die Syntax von MySQL nic...

Was macht die MySQL-Datenbank?

MySQL ist ein relationales Datenbankverwaltungssy...

Unvollständige Lösung für die Verwendung von Eingabetyp=Textwert=str

Ich bin heute auf ein sehr seltsames Problem gesto...

Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)

Ich habe schon einmal einen solchen Artikel gesch...

Detaillierte Analyse der Rolle von HTML-Kommentar-Tags <!--...-->

Wenn wir den Quellcode vieler Websites überprüfen...

Mehr als 100 Zeilen Code zur Implementierung von React Drag Hooks

Vorwort Der Quellcode umfasst insgesamt nur mehr ...

vsCode generiert Vue-Vorlagen mit einem Klick

1. Verwenden Sie die Tastenkombination Strg + Ums...

17 JavaScript-Einzeiler

Inhaltsverzeichnis 1. DOM & BOM bezogen 1. Üb...