How do I use Axios with Vuex in a Vue 3 application?

How do I use Axios with Vuex in a Vue 3 application?

To use Axios with Vuex in Vue 3, first install Axios and Vuex. Then, create a Vuex store and use Axios to fetch data.

Can you show me a code example?

Sure! Here's a simple example:

import { createStore } from 'vuex';
import axios from 'axios';

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

This sets up a Vuex store with an action to fetch data using Axios.

How do I call the fetchData action in my component?

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

import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    store.dispatch('fetchData');
  }
};

What if I want to handle errors from the Axios request?

You can handle errors by adding a .catch block to your Axios request. For example:

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