Defining actions and mutations

It's great that our components can now get data from the store, but it would be probably even more interesting if our components were also able to change the data in the store. On the other hand, we all know that we cannot modify the store's state directly.

The state should not be touched by any of the components. However, you also remember from our chapter about the Vuex store that there are special functions that can mutate the store. They are even called mutations. These functions can do whatever they/you want with the Vuex store data. These mutations can be called using the commit method applied to the store. Under the hood, they essentially receive two parameters – the state and the value.

I will define three mutations – one for each of the timer's definitions. These mutations will update the corresponding attribute of the config object with a new value. Thus, my mutations look as follows:

//store/mutations.js
export default...