What are Vuex actions and mutations?

Can you explain what Vuex actions and mutations are?

Sure! Vuex actions are functions that can perform asynchronous operations and commit mutations. Mutations are synchronous functions that directly modify the state.

How do I define an action in Vuex?

You define an action in the actions object of your Vuex store. It typically takes a context parameter and can call mutations.

Can you give me an example of an action and a mutation?

Absolutely! Here's a simple example:

const actions = {
  fetchData({ commit }) {
    // Simulate an API call
    setTimeout(() => {
      commit('setData', data);
    }, 1000);
  }
};

const mutations = {
  setData(state, data) {
    state.data = data;
  }
};

What is the difference between actions and mutations?

The main difference is that actions can be asynchronous and can contain any arbitrary code, while mutations must be synchronous and only modify the state.