Использование 1 вызова Axios для нескольких компонентов

Question

Я выполняю простой вызов Axios так:

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

А затем отобразить данные через цикл массива v-for на моих компонентах. Проблема в том, что я запускаю этот смонтированный вызов Axios для каждого компонента, для которого я его использую. Например, у меня есть компонент для экранов рабочего стола, который использует этот вызов axios для отображения данных на боковой панели, в то время как мой компонент мобильного экрана использует точно такой же вызов axios, который отображается в заголовке.

Проблема в том, что я выполняю несколько вызовов одного и того же API, поскольку каждый компонент использует смонтированную функцию axiox.

Есть ли способ выполнить этот вызов один раз, а затем использовать цикл v-for для каждого компонента?

Answer 1

Используйте Vuex для такой задачи.

Я приведу очень простой пример. Установите vuex и axios в вашем проекте

позже создайте файл в вызове вашего проекта, 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 )
      })
    }
  }
})

в вашем main.js файле импорта store.js

import store from "./store";

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

в вашем сообщении App.vue 'updateInfo'.

App.vue

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

И в компоненте, который вы хотите использовать info компонент данных, установите:

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

и использовать информацию для визуализации элементов с помощью директивы v-for.

Эта информация относится к массиву элементов, которые вы приносите