CODEWITHSUNDEEP
javascriptvue.jsaxios
Brayden
Brayden

Reputation: 125

Using 1 Axios call for multiple components

I am running a simple Axios call like so:

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

And then display the data through a v-for array loop on my components. The problem is that I am running this mounted Axios call on each component I use it for. For example, I have a component for desktop screens that uses this axios call to display data in sidebar, while my mobile screen component uses the exact same axios call too display in a header.

The problem is that I am running multiple calls to the same API since each component is using the mounted axiox function.

Is there a way to run this call once and then utilize the v-for loop on each component?

Upvotes: 1

Views: 1500

Answers (2)

Dach0
Dach0

Reputation: 337

OK, I've found a way to handle this without Vuex. My example: I have two components TrainingCourseComponent and CertificateComponent.

In TrainingCourseComponent:

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

and you can do this in any other component but in this case CertificateComponent(you can define it in mounted() or created() method it doesn't matter:

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

p.s. I guess you know but just in case Event is a global Vue instance defined in app.js that I use for different kind of stuff :)

app.js

 /**
   * some custom event
   */

  window.Event = new Vue();

Upvotes: 1

Yoarthur
Yoarthur

Reputation: 917

Use Vuex for such task.

I'll make a very simple example. Install vuex and axios in your project

later create a file in your project call, store.js.

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 store.js file

import store from "./store";

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

in your App.vue dispatch 'updateInfo' action.

App.vue

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

And in the component you want to use the info data component, set:

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

and use info to render the elements with the v-for directive.

This info refers the array of elements you bring

Upvotes: 2

Related Questions