Nuxt3异步Composable未正常赋值，React转Nuxt开发者求助

你的代码本身没有语法错误，出现console.log显示null的原因是异步执行时机的问题：

• 当你在<script setup>里同步执行console.log(foo)时，someAsyncFn()还没完成异步请求，foo的初始值就是你定义的null。
• 但foo是响应式的ref，等someAsyncFn()完成后，foo.value会被自动更新，模板里的{{ foo }}也会同步渲染最新值。

如果需要在脚本中等待异步结果再执行后续逻辑 #

你确实需要把Composable改成异步函数，并在调用时使用await：

修改后的Composable：

// useAsyncFoo.js
export default async () => {
  const foo = ref(null);
  // 等待异步函数完成后赋值
  foo.value = await someAsyncFn();
  return foo;
}

页面中使用：

<script setup>
// await后拿到的foo已经是更新后的响应式ref
const foo = await useAsyncFoo();
console.log(foo.value); // 这里能输出异步返回的真实值
</script>

Nuxt3推荐的异步数据处理方式 #

对于数据获取类的异步逻辑，Nuxt3提供了useAsyncData内置Composable，它支持服务端渲染、数据缓存、错误处理等特性，更适合实际项目：

// useAsyncFoo.js
export default () => {
  // useAsyncData会自动处理异步状态，返回包含data、pending、error等属性的对象
  return useAsyncData('foo', async () => {
    return await someAsyncFn();
  });
}

页面中使用：

<script setup>
const { data: foo, pending, error } = useAsyncFoo();

// pending可以用来显示加载状态，error处理请求失败情况
</script>

<template>
  <div v-if="pending">加载中...</div>
  <div v-else-if="error">请求失败：{{ error.message }}</div>
  <div v-else>{{ foo }}</div>
</template>

总结 #

• 仅在模板中渲染异步数据：你的原始代码是可行的，只是console.log时机太早，看不到后续更新。可以用watch(foo, (newVal) => console.log(newVal))监听值变化来验证。
• 需要在脚本中依赖异步结果：将Composable改为异步函数并await调用。
• 生产环境数据获取：优先使用Nuxt3的useAsyncData来获得更完善的功能支持。

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