Detailed explanation of the use of mutations and actions in Vuex

This time I will bring you a detailed explanation of the use of mutations and actions in Vuex. What are the precautions for using mutations and actions, as follows This is a practical case, let’s take a look at it.

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

In fact, in vuex, actions are just an architecture concept and are 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 real limitation of vuex is that mutation must be synchronous (in redux it is like reducer Must return to the next state synchronously). The meaning of synchronization is that after each mutation is executed, it can correspond to a new state (same as reducer), so You can take a snapshot of devtools and save it, and then you can time-travel at will. If you have devtool turned on 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 the mutation, a snapshot will be printed immediately in dev-tools, and the asynchronous operation has not been completed at this time. The snapshot at this time is The information is wrong.

When performing asynchronous operations 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 check the changes in a certain mutation.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement Yuansheng JS todolist function

##FileReader implements local preview before uploading pictures

The above is the detailed content of Detailed explanation of the use of mutations and actions in Vuex. For more information, please follow other related articles on the PHP Chinese website!