What is the difference between mutations and actions in Vuex? (detailed tutorial)

Below I will share with you a detailed explanation of the difference between mutations and actions in Vuex. It has a good reference value and I hope it will be helpful to everyone.

The distinction between actions and mutations is not to solve race conditions, but to be able to use devtools to track state changes.

In fact, in vuex, actions are just an architectural concept, not necessary. In the final analysis, it is just a function. You can do whatever you want in it, as long as the mutation is triggered in the end. . How to deal with asynchronous race conditions is the user's own business.

The only thing that really limits you to vuex is that mutation must be synchronous (in redux, it's like the reducer must return the next state synchronously). The meaning of synchronization is that after each mutation is executed, it can correspond to a new state (the same as reducer), so that devtools can take a snapshot and save it, and then time-travel can be done at will. If you open devtool and call an asynchronous action, you can clearly see when the mutations it calls are recorded, and you can immediately view their corresponding status.

Personal test: If an asynchronous operation is performed in mutation, a snapshot will be printed immediately in dev-tools, and the asynchronous operation has not been completed yet. , the snapshot information at this time is wrong.

When performing an asynchronous operation in an action, dev-tools will wait until the asynchronous operation is completed before printing a snapshot of the mutation. This makes it easier for us to check time-travel and view the changes in a certain mutation.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using ES6 to solve the memory leak problem through WeakMap (detailed tutorial)

How to set global variables in vue2? (Detailed tutorial)

How to implement the string splicing function in JS (extending String.prototype.format)

The above is the detailed content of What is the difference between mutations and actions in Vuex? (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!