How can I fetch data using Vuex in a Vue.js application?

How can I fetch data using Vuex in a Vue.js application?

You can fetch data in Vuex by using actions. Actions can perform asynchronous operations like API calls.

Can you show me an example of how to set up an action for data fetching?

Sure! Here's a simple example:

// store.js
import axios from 'axios';

const store = new Vuex.Store({
  state: {
    data: null,
  },
  mutations: {
    setData(state, payload) {
      state.data = payload;
    },
  },
  actions: {
    fetchData({ commit }) {
      return axios.get('https://api.example.com/data')
        .then(response => {
          commit('setData', response.data);
        });
    },
  },
});

This action fetches data from an API and commits it to the state.

How do I call this action in my Vue component?

You can call the action in the created lifecycle hook of your component like this:

export default {
  created() {
    this.$store.dispatch('fetchData');
  },
};

What if I want to handle errors during the data fetching?

You can handle errors by adding a .catch block to your API call in the action. For example:

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

Thanks! This is really helpful.