Quelle est la différence entre les mutations et les actions dans Vuex ? (tutoriel détaillé)

Je vais maintenant partager avec vous une explication détaillée de la différence entre les mutations et les actions dans Vuex. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

La distinction entre les actions et les mutations n'est pas de résoudre les conditions de concurrence, mais de pouvoir utiliser des outils de développement pour suivre les changements d'état.

En fait, dans vuex, les actions ne sont qu'un concept architectural, pas nécessaire en dernière analyse, ce n'est qu'une fonction, vous pouvez y faire ce que vous voulez, à condition. car la mutation est finalement déclenchée. La manière de gérer les conditions de concurrence asynchrone relève de l'affaire de l'utilisateur.

La seule chose qui vous limite vraiment à vuex est que la mutation doit être synchrone (en redux, c'est comme si le réducteur devait renvoyer l'état suivant de manière synchrone). La signification de la synchronisation est qu'après l'exécution de chaque mutation, elle peut correspondre à un nouvel état (le même que le réducteur), afin que les outils de développement puissent prendre un instantané et le sauvegarder, puis le voyage dans le temps peut être effectué à volonté. Si vous ouvrez devtool et appelez une action asynchrone, vous pouvez voir clairement quand les mutations qu'il appelle sont enregistrées et vous pouvez immédiatement voir leur statut correspondant.

Test personnel : Si une opération asynchrone est effectuée en mutation, un instantané sera imprimé immédiatement dans dev-tools, et l'opération asynchrone n'est pas encore terminée . , les informations sur l'instantané sont erronées.

Lors de l'exécution d'une opération asynchrone dans une action, les outils de développement attendront que l'opération asynchrone soit terminée avant d'imprimer un instantané de la mutation. Cela nous permet d'examiner plus facilement le voyage dans le temps et de visualiser les modifications. une certaine mutation.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Utiliser ES6 pour résoudre les problèmes de fuite de mémoire via WeakMap (tutoriel détaillé)

Comment définir des variables globales dans vue2 ? (Tutoriel détaillé)

Comment implémenter la concaténation de chaînes en JS (String.prototype.format étendu)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!