Leveraging a single Axios request across various components

Question

Leveraging a single Axios request across various components

My current setup involves making a simple Axios call in this way:

.get('https://myAPI.com/')
  .then(response => {
    this.info = response.data
  })

Subsequently, I utilize a v-for array loop on my components to display the retrieved data. However, the issue arises from repeatedly running this mounted Axios call on every component where it is used.

For instance, one of my components for desktop screens employs this axios call to showcase data in a sidebar, while another component for mobile screens also uses the exact same axios call for displaying information in a header.

The dilemma lies in the fact that multiple calls are being made to the same API due to each component implementing the mounted axios function separately.

Is there a strategy available to execute this call just once and then apply the v-for loop on each individual component?

javascript vue.js axios

Answer 1

Answer №1

If you need to manage state in your Vue project, consider using Vuex.

Here is a simple example to get you started: Install Vuex and axios in your project.

Create a file named store.js within your project directory.

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

const store = new Vuex.Store({
  state: {
    info : []
  },
  mutations: {
    updateInfo (state, info) {
      state.info = info
    }
  },
  actions: {
    fetchData({commit}) {
      axios.get('https://myAPI.com/')
       .then(response => {
         commit('updateInfo', response.data )
      })
    }
  }
})

In your main.js, import the store.js file.

import store from "./store";

new Vue({
  ...
  store,
  ...
});

In your App.vue, dispatch the 'updateInfo' action.

App.vue

  ...
  created() {
    this.$store.dispatch("fetchData");
  }
  ...

To access the info data component in any component, set it up like this:

...
computed: {
  info() {
    return this.$store.state.info
  }
},
...

You can use the info array to render elements using the v-for directive.

This info refers to the array of elements fetched from the API.

Answer 2

If you need to manage state in your Vue project, consider using Vuex.

Here is a simple example to get you started: Install Vuex and axios in your project.

Create a file named store.js within your project directory.

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

const store = new Vuex.Store({
  state: {
    info : []
  },
  mutations: {
    updateInfo (state, info) {
      state.info = info
    }
  },
  actions: {
    fetchData({commit}) {
      axios.get('https://myAPI.com/')
       .then(response => {
         commit('updateInfo', response.data )
      })
    }
  }
})

In your main.js, import the store.js file.

import store from "./store";

new Vue({
  ...
  store,
  ...
});

In your App.vue, dispatch the 'updateInfo' action.

App.vue

  ...
  created() {
    this.$store.dispatch("fetchData");
  }
  ...

To access the info data component in any component, set it up like this:

...
computed: {
  info() {
    return this.$store.state.info
  }
},
...

You can use the info array to render elements using the v-for directive.

This info refers to the array of elements fetched from the API.

Answer 3

Answer №2

Alright, I have come up with a solution to manage this situation without relying on Vuex. Let me explain with an example involving two components: TrainingCourseComponent and CertificateComponent.

For the TrainingCourseComponent:

 data() {
     return {
        trainings : {},
     },
methods:{
       loadTrainingCenters(){
         axios.get("/trainingCourse")
         .then(({data}) => {
         this.trainings = data;
         Event.$emit('globalVariables', data);
         });
       }
}
 created(){
        this.loadTrainingCenters();          
        }

Similarly, you can implement this in any other component like CertificateComponent (you can define it within mounted() or created() method):

 data() {
            return {
                training_courses:{}
            }
 }
 mounted(){
          Event.$on('globalVariables', (trainings) => {
            this.training_courses = trainings;
          });
        }

By the way, just as a reminder, Event is a global Vue instance defined in app.js that I utilize for various purposes :)

app.js

 /**
   * custom event handling
   */

  window.Event = new Vue();

Answer 4

Alright, I have come up with a solution to manage this situation without relying on Vuex. Let me explain with an example involving two components: TrainingCourseComponent and CertificateComponent.

For the TrainingCourseComponent:

 data() {
     return {
        trainings : {},
     },
methods:{
       loadTrainingCenters(){
         axios.get("/trainingCourse")
         .then(({data}) => {
         this.trainings = data;
         Event.$emit('globalVariables', data);
         });
       }
}
 created(){
        this.loadTrainingCenters();          
        }

Similarly, you can implement this in any other component like CertificateComponent (you can define it within mounted() or created() method):

 data() {
            return {
                training_courses:{}
            }
 }
 mounted(){
          Event.$on('globalVariables', (trainings) => {
            this.training_courses = trainings;
          });
        }

By the way, just as a reminder, Event is a global Vue instance defined in app.js that I utilize for various purposes :)

app.js

 /**
   * custom event handling
   */

  window.Event = new Vue();

Leveraging a single Axios request across various components

Answer №1

Answer №2

Similar questions

Is there a way to check if a file name input is valid using regular expressions?

Error: Failed to clone an object in Electron due to an unhandled promise

Learn how to trigger a re-render in React to update a value stored in local storage

Is there a way for me to choose multiple checkboxes simultaneously?

Values in Local Storage are not located upon first attempt, but after a reload they function properly

Using NextJs <Script> is only effective after a page has been reloaded

Creating a custom progress bar using Javascript and Jquery

Create custom components by wrapping npm components and exporting them as a single custom component

What is the process for generating an API endpoint in Next.js that includes a query string?

Tips for implementing controlled components in Vue to update values in the parent component object

I am experiencing an issue with my React app deployed on Heroku where it successfully loads the home page but fails

Incorporating a classList.toggle into a snippet of code

Updating a table in Javascript after deleting a specific row

best practices for data flow between components in React using hooks

Strange Reselect selector actions

Empty body detected in Jquery AJAX request with Django REST running in a Docker environment

Basic AngularJS application, however I am receiving {{this is supposed to be the information}}

CSS swapping versus CSS altering

Is it possible to create a THREE.js form using a sequence of outlines?

What is the process for adding a download link to my canvas once I have updated the image?