我在 Nuxt 3 中有以下异步可组合项，但它没有按预期工作，来自 React 背景，我认为我错过了一些东西。
我的可组合项中有以下代码。
// useAsyncFoo.js
export default () => {
const foo = ref(null);
someAsyncFn().then(value => foo.value = value);
return foo;
}
然后在我的页面上，我这样使用它：
<script setup> const foo = useAsyncFoo(); console.log(foo); // null </script> ...
我希望 foo 获取承诺返回的值，但它始终是 null。
在 Nuxt 3 中等待可组合项很常见吗？ (await useAsyncFoo()) 并将其导出为异步函数？我做错了什么吗？
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我花了一个下午的时间尝试将数据从可组合项传输到页面，但最终总是得到奇怪或未定义的数据。阅读这里的评论我终于明白了我错过了什么并设法做到了，所以谢谢！如果有帮助，这是我的文件。
（FetchWrapper 是我受此启发而制作的一个可组合项 文章，因此我不必在每个请求上添加令牌，但它使用 Nuxt $fetch 方法。）
我的可组合项
export const useFoo = () => { const { fetchWrapper } = useFetchWrapper() const bar = ref([]) const getApiData = async () => { try { bar.value = await fetchWrapper .get(`${useRuntimeConfig().public.API_URL}/foobar`, null) } catch(error) { // } } return { bar, getApiData } }我的页面
<script setup> const { bar, getApiData } = useFoo() await getApiData() </script> <template> {{ bar }} </template>