javascript - change the value of state in vue

Question

I know that actions handle asynchronous processing. I don’t have asynchronous operations. What I mean is that after clicking a button, the value in the state is directly changed in the methods, without actions or mutations. Does this comply with the specifications of vue?

Answer 1

About why you can’t directly call the mutation method or directly modify the state attribute, but you must submit the mutation through commit? Quote from official documentation:

Once again, we submit mutations instead of directly changing store.state.count because we want to track state changes more clearly. This simple convention makes your intentions more obvious, so you can more easily interpret state changes within the application when reading the code. In addition, this also gives us the opportunity to implement some debugging tools that can record every state change and save state snapshots. With it, we can even achieve a debugging experience like time travel.
Since the state in the store is responsive, calling the state in the store in the component is as simple as returning it in the calculated property. Triggering changes is just a matter of submitting mutations in the component's methods.

It can be seen that when designing vuex, in order to track changes in state, it was agreed that commit must be used to submit changes in mutation-triggered data. You can try the official vue debugging plug-in, called Vue Devtools. You can directly see components, data, vuex, etc., and you can also track changes. If you try it, you will probably know why you do this.