What are Vuex mutations and how do they work?

What are Vuex mutations and how do they work?

Vuex mutations are functions that directly modify the state in a Vuex store. They are the only way to change the state, ensuring that state changes are trackable and predictable.

Can you give me an example of a Vuex mutation?

Sure! Here's a simple example:

mutations: {
  increment(state) {
    state.count++;
  }
}

This mutation increases the count property in the state by 1.

How do I call a mutation from a component?

You can call a mutation using the commit method. For example:

this.$store.commit('increment');

What is the difference between mutations and actions in Vuex?

Mutations are synchronous and directly change the state, while actions can be asynchronous and can call mutations to change the state.