提供/注入axios响应

Question

我有一个组件，我使用axios从API获取数据，它工作，我可以在这个组件中使用这个数据，但是当我试图将这个数据提供给另一个组件时，我没有得到任何数据。下面是我的部分代码:

data() {
return {
theme: [],
};
},
provide() {
return {
theme: this.theme
}
},
methods: {
getTheme() {
axios
.get(here is my api url)
.then((response) => (this.theme = response.data.data));
},
},
mounted() {
this.getTheme();
},

，这是第二个组件:

<template>
<div class="project-wrapper">
<project-card
v-for="course in theme.courses"
:name="course.name"
:key="course.id"
></project-card>
</div>
</template>
<script>
import ProjectCard from "../components/ProjectCard.vue";
export default {
inject: ["theme"],
components: {
ProjectCard,
}
};
</script>

我的代码有什么问题?

Answer 1

链接中的第二个选项可能会对您有所帮助

provide() {
return {
$theme: () => this.theme,
}
},

和

inject: ["$theme"],
computed: {
computedProperty() {
return this.$theme()
}
}

和

v-for="course in computedProperty.courses"

Answer 2

当您将provide设置为'处理'theme时，它会增加主题值的反应性-即空数组([])。

如果你修改了这个数组中的元素，它将保持反应性，但是如果你替换了这个数组，它的反应性就会被破坏。

尝试将结果数据添加到axios调用中，而不是覆盖theme。例如:

getTheme() {
axios
.get(here is my api url)
.then((response) => (this.theme.push(...response.data.data));
}

Answer 3

将theme作为注入属性传递给子组件。

参见Vue.js Docs:

提供和注入绑定不是响应的。这是有意为之。然而，如果你向下传递一个观察到的对象，它的属性

由于注入绑定不是响应性的，所以theme的改变值在子组件内部是不可见的(它将保持不变，就像没有axios调用发生一样)。

解决方案1

将值作为观察对象传递给子组件。这意味着在你的getTheme()方法中，你不会重写整个属性值(this.theme = ...)，而只写入已经存储在属性(this.theme.themeData = ...)中的对象。

data() {
return {
theme: { },
};
},
provide() {
return {
theme: this.theme
}
},
methods: {
getTheme() {
axios
.get(here is my api url)
.then((response) => (this.theme.themeData = response.data.data));
},
},
mounted() {
this.getTheme();
}

解决方案2

或者，你可以使用经典的props将值传递给子组件，这总是响应的。