Why does the Vuex asynchronous method still work in mutations?

the official document says that asynchronous modification of the state will not take effect: https://vuex.vuejs.org/zh-cn/.

but the following code does change the value:

mutations: {
      increment: (state)=>{
        window.fetch("https://jsonplaceholder.typicode.com/posts/1")
        .then(response => response.json())
        .then(json => {
          state.countPP
        })
    },
    decrement: state => state.count--
  }

sample address
https://jsfiddle.net/justforu.

do I understand something wrong?

Mar.09,2021

this is what the official website says:

now imagine that we are debug an app and observe the mutation log in devtool. Each mutation is recorded, and the devtools needs to capture a snapshot of the previous state and the latter state. However, in the above example, the callback in the asynchronous function in mutation makes this impossible: because when the mutation is triggered, the callback function has not been called, and devtools does not know when the callback function is actually called-essentially any state change made in the callback function is untraceable.

the official document says that the asynchronous modification status will not take effect (where did you see it?)

in the above example, the callback in the asynchronous function in mutation makes this impossible. What is impossible?
every mutation is recorded, and the devtools needs to capture a snapshot of the previous state and the latter state.
means that the asynchronous callback function is used to manipulate the data, and the state change of the data is untraceable.
, but not what you understand, the modification status will not take effect

and there is the following explanation on the official website

mixing asynchronous calls in mutation can make your program difficult to debug. For example, when you call two mutation with asynchronous callbacks to change the state, how do you know when the callback is and which callback is the first? That's why we need to distinguish between these two concepts. In Vuex, mutation is all Synchronize transactions:

PS
devtools is a browser debugging plug-in for vue
useful for vue debugging

Menu