Just as we mentioned in the previous sections, the store state must be explicitly committed through mutations. A mutation is simply a function just like any other function you have learned about in the store properties, but it must be defined in the mutations property in the store. It always takes the state as the first argument. Let's create some mutations and use them in the child component with the following steps:
- Create a store with a state property and some mutation methods that we can use to mutate the state, as follows:
// vuex-sfc/mutations/basic/src/entry.js
const store = new Vuex.Store({
state: { number: 1 },
mutations: {
multiply (state) {
state.number = state.number * 2
},
divide (state) {
state.number = state.number / 2
},
multiplyBy (state, n) {
state.number = state.number n
}
}
})
- Create the following methods in the component to add a call to commit the mutation by using this.$store.commit:
// vuex-sfc/mutations...