How can I manage async data in Vue using Vuex?

How can I manage async data in Vue using Vuex?

You can manage async data in Vue using Vuex by creating actions that handle API calls and mutations to update the state.

Can you show me an example of an action for fetching data?

Sure! Here's a simple action:

fetchData({ commit }) {
  return axios.get('https://api.example.com/data')
    .then(response => {
      commit('SET_DATA', response.data);
    });
}

What about handling errors during the fetch?

You can handle errors by using a try-catch block or by chaining a .catch() method to your promise. For example:

fetchData({ commit }) {
  return axios.get('https://api.example.com/data')
    .then(response => {
      commit('SET_DATA', response.data);
    })
    .catch(error => {
      commit('SET_ERROR', error);
    });
}

How do I set up the mutations for this?

You can set up mutations like this:

mutations: {
  SET_DATA(state, data) {
    state.data = data;
  },
  SET_ERROR(state, error) {
    state.error = error;
  }
}