Nuxt3组件间并行请求数据及组件等待依赖请求的正确方式

问题2：子组件等待页面请求完成后再发起依赖请求 #

你的场景中，Sidebar 组件的请求依赖 page.vue 里 useFetch 返回的 category 值，直接在 Sidebar 初始化时调用 useFetch 会拿到未更新的空值，可通过以下方式解决：

方案1：监听状态变化触发请求 #

在 Sidebar.vue 中监听 store 内的 category，当它出现有效值时再发起请求：

const paramsStore = useParamsStore();
const { category } = storeToRefs(paramsStore);

const sidebar = ref(null);

// 监听category，有值时执行请求
watch(category, async (newCategory) => {
  if (!newCategory) return;
  const { data } = await useFetch('/api/sidebar', {
    params: { category: newCategory }
  });
  sidebar.value = data.value;
}, { immediate: true }); // 立即执行一次，兼容category已提前赋值的情况

方案2：结合 useAsyncData 懒加载执行 #

用 useAsyncData 的 lazy 模式延迟执行，再通过监听触发请求：

const paramsStore = useParamsStore();
const { category } = storeToRefs(paramsStore);

// 初始化不执行请求，手动控制时机
const { data: sidebar, execute } = useAsyncData('sidebar', () => {
  return $fetch('/api/sidebar', {
    params: { category: category.value }
  });
}, { lazy: true });

// 监听category变化，触发请求
watch(category, (newCategory) => {
  if (newCategory) execute();
}, { immediate: true });

问题1：组件间并行获取数据 #

如果多个组件的请求无依赖关系，实现并行请求只需在各自组件中正常使用 useFetch 或 useAsyncData 即可：

• 服务端渲染时：Nuxt3 会自动收集所有组件的异步请求，并行执行后再完成页面渲染，不会串行等待。
• 客户端渲染时：组件挂载时各自发起请求，浏览器会自动并行处理这些 HTTP 请求。

如果需要主动控制一组无依赖请求并行执行，可在公共位置（如 layout 或页面）用 Promise.all 包裹：

// 并行获取两个无依赖的数据
const [productRes, sidebarRes] = await Promise.all([
  useFetch('/api/product', { params: { ... } }),
  useFetch('/api/sidebar', { params: { ... } })
]);

const product = productRes.data;
const sidebar = sidebarRes.data;

内容的提问来源于stack exchange，提问作者Ronen Teva