我正在运行一个简单的 Axios 调用，如下所示：
.get('https://myAPI.com/')
.then(response => {
this.info = response.data
})
然后通过我的组件上的 v-for 数组循环显示数据。问题是我在我使用它的每个组件上运行这个挂载的 Axios 调用。例如，我有一个桌面屏幕组件，它使用此 axios 调用在侧边栏中显示数据，而我的移动屏幕组件使用完全相同的 axios 调用也显示在标题中。
问题是我正在对同一个 API 运行多个调用，因为每个组件都使用挂载的 axiox 函数。
有没有办法让这个调用运行一次，然后在每个组件上使用 v-for 循环？
【问题讨论】：
标签： javascript vue.js axios
使用 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 指令渲染元素。
这个信息是指你带来的元素数组
【讨论】：
好的，我找到了一种不用 Vuex 来处理这个问题的方法。我的例子：我有两个组件 TrainingCourseComponent 和 CertificateComponent。
在培训课程组件中：
data() {
return {
trainings : {},
},
methods:{
loadTrainingCenters(){
axios.get("/trainingCourse")
.then(({data}) => {
this.trainings = data;
Event.$emit('globalVariables', data);
});
}
}
created(){
this.loadTrainingCenters();
}
您可以在任何其他组件中执行此操作，但在这种情况下 CertificateComponent（您可以在 mount() 或 created() 方法中定义它并不重要：
data() {
return {
training_courses:{}
}
}
mounted(){
Event.$on('globalVariables', (trainings) => {
this.training_courses = trainings;
});
}
附言我想你知道，但万一 Event 是 app.js 中定义的全局 Vue 实例，我用于不同类型的东西:)
app.js
/**
* some custom event
*/
window.Event = new Vue();
【讨论】：