Question

我正在像这样运行一个简单的Axios呼叫：

Set /?

，然后通过v-for数组循环在我的组件上显示数据。问题是，我正在使用它的每个组件上运行此已挂载的Axios调用。例如，我有一个用于桌面屏幕的组件，该组件使用此axios调用在边栏中显示数据，而我的移动屏幕组件也使用与标题中完全相同的axios调用。

问题是由于每个组件都使用已安装的axiox函数，因此我正在对同一API进行多次调用。

是否可以运行一次此调用，然后在每个组件上利用v-for循环？

Answer 1

好的，我找到了一种无需Vuex即可处理的方法。我的示例：我有两个组件TrainingCourseComponent和CertificateComponent。

在TrainingCourseComponent中：

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

，您可以在任何其他组件中执行此操作，但在这种情况下，可以使用CertificateComponent（可以在Mounted（）或created（）方法中定义它，这无关紧要：

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

p.s。我猜你知道，但万一Event是在app.js中定义的全局Vue实例，我将其用于其他种类的东西：）

app.js

 /**
   * some custom event
   */

  window.Event = new Vue();

Answer 2

将Vuex用于此类任务。

我将举一个非常简单的例子。项目中的Install 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
  }
},
...

并使用info通过v-for指令呈现元素。

此信息表示您带来的元素数组

对多个组件使用1个Axios调用

2 个答案: