Mutations and Actions in Vuex

Mutations

One of the main problems with having a shared global state in a program is that it can lead to problems that are hard to debug. Changes to the state could be coming literally from anywhere in the application. So, tracking down exactly when and where the state is altered becomes very difficult.

The Vuex architecture deals with this problem by stating that components never change (or “mutate”) the state directly. Instead, when we want to update the state in some way, we need to use a mutation.

By requiring all state changes to be made via mutations, Vuex can keep track of them. This enables tools like the Vue devtools to present a log of all the mutations applied to the store, allowing us to see exactly what changes were made and when.