Vuex 突变是原子的吗？

Question

I'm trying to understand if mutations in Vuex are atomic. I have this code and I'm not sure if there is any scenario when CHANGE_A mutation will be call while CHANGE_B is not finished yet:

const mutations = {
  [CHANGE_A](state, DATA) {
    Vue.set(this.test, 'left', DATA);
  },

  [CHANGE_B](state, data) {
    Vue.set(this.test, 'right', DATA);
    Vue.set(this.test, 'left', DATA);
  },
}

Thank you

Answer 1

Mutation are atomic because their handler functions must always be synchronous, as described in the documentation: https://vuex.vuejs.org/guide/mutations.html

If you were to go against this practice and make the handler function asynchronous then they would no longer be atomic.

Answer 2

Mutations are just ordinary synchronous functions, so yes they are atomic. No two mutations will execute at the same time, provided you aren't doing any async operations inside any of them like fetch requests, setTimeout or promises, or indirectly calling a mutation within another mutation.

When Vue detects that a change has been made to reactive data, then those change events are queued and watchers will be executed within the next microtask (asynchronous).