Why do mutations can't be tracked in asynchronous calls in Vuex 3.x

I am watching a course on Vuex 3.x and they said that mutations can’t be tracked/recorded when asynchronous calls are made and instead you have to use actions (or something like that). So, I was wondering why they can’t be recorded, I don’t understand that can someone explain why?

Mutations are synchronous and therefore cannot have any asynchronous side effects (e.g. an API call). Because of this we need an area for async functions so this is where actions come in.

Put simply:

  • Mutations commit final changes to state (which is why they’re synchronous)
  • Actions perform business logic with the intent to alter the state using a mutation (which is why they can be asynchronous)
1 Like

Hi @petethewizard,
-Mutations, as the name suggests are used to modify/mutate your state object. Actions are quite similar to mutations, but instead of mutating the state, Actions commit mutations. Actions can contain any arbitrary asynchronous code or business logic.
-Vuex recommends the state object should only be mutated inside the Mutation functions. It is also recommended not to run any heavy or blocking code inside the Mutation functions since it’s synchronous in nature.