如何在（子）组件上使用 Axios 调用 API 并将结果呈现在 Nuxt 中的 Page（父）组件上？

Posted 2023-02-23

【中文标题】如何在（子）组件上使用 Axios 调用 API 并将结果呈现在 Nuxt 中的 Page（父）组件上？

【英文标题】：How do I call the API with Axios on the (child) component and present the result on the Page (parent) component in Nuxt?

【发布时间】：2021-01-21 16:52:55

【问题描述】：

如果我在页面组件 (mountains.vue) 上运行此代码，它可以工作，并且我在 Axios 的帮助下从 API 获取数据：

<template>
  <div>
    <ul>
      <li v-for="(mountain, index) in mountains" :key="index">
         mountain.title 
      </li>
    </ul>
  </div>
</template>

<script>
export default 
  data() 
    return 
      mountains: [],
    ;
  ,
  async asyncData( $axios ) 
    const mountains = await $axios.$get("https://api.nuxtjs.dev/mountains");
    return  mountains ;
  ,
;
</script>

但是我想把这段代码放在一个组件中（MountainsList）并在组件中进行Axios调用（MountainsList），但是通过将组件注入到页面组件（mountains.vue）上来显示数据像这样的 Nuxt：

<template>
  <MountainsList />
</template>

现在，当我运行代码时，使用 Axios 的数据不再出现...那么如何将数据注入到上面的 Page 组件中，在子组件中进行 Axios 调用？

【参考方案1】：

asyncData 仅适用于页面

来自文档

每次加载页面组件之前都会调用asyncData

实现所需的一种方法是将山脉作为道具传递给MountainList 组件。像下面这样...

<template>
  <MountainList :mountains="mountains" />
</template>

<script>
export default 
  async asyncData( $axios ) 
    const mountains = await $axios.$get("https://api.nuxtjs.dev/mountains");
    return  mountains ;
  ,
;
</script>

以及带有代码和道具山的组件......

<template>
  <div>
    <ul>
      <li v-for="(mountain, index) of mountains" :key="index">
         mountain.title 
      </li>
    </ul>
  </div>
</template>
    
<script>
export default 
  props: ['mountains'],
;
</script>

如果您真的想在子组件中进行 API 调用，您可以使用 fetch 方法。

您也不应该在页面上定义data() 属性。我相信它会覆盖服务器渲染的数据。

【参考方案2】：

根据official docs：

此目录中的组件将无权访问asyncData。

这意味着components文件夹内的任何组件都无法访问该方法。