How can I fetch data using Vuex in my Vue application?

How can I fetch data using Vuex in my Vue application?

You can fetch data in Vuex by using actions. First, create an action that makes an API call.

Can you show me an example of an action that fetches data?

Sure! Here's a simple example:

actions: {
  async fetchData({ commit }) {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    commit('setData', data);
  }
}

What about the mutation to set the data?

You would define a mutation like this:

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

How do I call this action in my component?

You can call the action in your component's mounted lifecycle hook like this:

mounted() {
  this.$store.dispatch('fetchData');
}