Core Concepts: Mutations

Vuex is a state machine loosely based on React’s Redux and the Flux pattern. The Flux pattern offers a solution for data distributed across multiple views (in Vue’s case, views are components) that can also do mutations. So, instead of numerous controllers that have to keep track of any possible state mutation and update any related component, Vuex is a centralized solution.

Mutations are a central feature of Vuex. They allow us to change the state. In addition, the reactive nature of Vuex will guarantee that any component using the related state will receive an update. Since Vuex is a state machine, each change results in a new state. We can inspect and switch between these states in the Vue Devtools.

How mutations work

We call mutations from components or Vuex actions. We can define mutations on the Vuex store with the mutations key, just like getters and the state. Any mutation always takes two arguments—the current state and the optional payload of the mutation.