Was ist der Unterschied zwischen Mutationen und Aktionen in Vuex? (ausführliches Tutorial)

Jetzt werde ich Ihnen eine detaillierte Erklärung des Unterschieds zwischen Mutationen und Aktionen in Vuex geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Der Unterschied zwischen Aktionen und Mutationen besteht nicht darin, Race-Bedingungen zu lösen, sondern in der Lage zu sein, mithilfe von Devtools Zustandsänderungen zu verfolgen.

Tatsächlich sind Aktionen in Vuex nur ein architektonisches Konzept, nicht notwendig. Letztendlich ist es nur eine Funktion. Sie können darin alles tun, was Sie wollen da die Mutation am Ende ausgelöst wird. Der Umgang mit asynchronen Race Conditions ist Sache des Benutzers.

Das Einzige, was Sie wirklich auf Vuex beschränkt, ist, dass die Mutation synchron sein muss (in Redux ist es so, als müsste der Reduzierer den nächsten Zustand synchron zurückgeben). Die Bedeutung der Synchronisierung besteht darin, dass jede ausgeführte Mutation einem neuen Status entsprechen kann (dasselbe wie ein Reduzierer), sodass Devtools einen Schnappschuss erstellen und speichern kann und dann nach Belieben eine Zeitreise durchgeführt werden kann. Wenn Sie devtool öffnen und eine asynchrone Aktion aufrufen, können Sie deutlich sehen, wann die aufgerufenen Mutationen aufgezeichnet werden, und Sie können sofort den entsprechenden Status anzeigen.

Persönlicher Test: Wenn eine asynchrone Operation in Mutation ausgeführt wird, wird sofort ein Snapshot in Dev-Tools gedruckt und die asynchrone Operation ist noch nicht abgeschlossen . Die Snapshot-Informationen sind derzeit falsch.

Wenn Sie einen asynchronen Vorgang in einer Aktion ausführen, warten die Entwicklungstools, bis der asynchrone Vorgang abgeschlossen ist, bevor sie einen Schnappschuss der Mutation drucken. Dies erleichtert uns die Überprüfung der Zeitreise und die Anzeige der Änderungen eine bestimmte Mutation.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwendung von ES6 zur Lösung von Speicherverlustproblemen durch WeakMap (ausführliches Tutorial)

So legen Sie globale Variablen in vue2 fest ? (Ausführliches Tutorial)

So implementieren Sie die String-Verkettung in JS (Erweitern von String.prototype.format)

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Mutationen und Aktionen in Vuex? (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!