Nuxt 3 和 Vue 3 中使用 `useFetch` 在 `asyncData` 中获取 API 数据，解决常见问题

vue.js

2024-03-20 09:49:41

Nuxt 3 和 Vue 3：使用 useFetch 在 asyncData 中获取 API 数据

问题概述

在 Nuxt 3 和 Vue 3 中，从 API 获取数据时遇到以下问题：

使用 onMounted 生命周期钩子无法获取数据。
useFetch 函数返回 null。

解决方法

要解决此问题，需要将以下步骤：

1. 正确使用 asyncData 钩子

useFetch 函数应与 asyncData 生命周期钩子一起使用。asyncData 钩子用于在组件创建之前获取数据，而 onMounted 钩子用于在组件挂载之后。

2. 在 asyncData 中调用 useFetch

在 asyncData 钩子中，使用 useFetch 函数获取数据并将其返回。以下是示例代码：

<script setup>
import { asyncData } from 'nuxt3'

const product = async (id) => {
  const { data, pending, error } = await useFetch(`https://fakestoreapi.com/products/${id}`);
  
  console.log("after this" + id);
  console.log(data.value);
  
  return data.value;
};

const asyncData = async () => { 
  return product(2); 
  
};
</script>

3. 在组件中使用数据

在组件中，可以使用 useAsyncData 钩子访问在 asyncData 钩子中获取的数据。以下是示例代码：

<template>
  <div>
    {{ product }}
  </div>
</template>

<script setup>
import { useAsyncData } from 'nuxt3'

const product = useAsyncData('product');

console.log(product);
</script>