Asynchrone Zusammensetzbarkeit von Nuxt 3

Question

Ich habe das folgende asynchrone Composable in Nuxt 3, aber es funktioniert nicht wie erwartet, da ich einen React-Hintergrund habe. Ich glaube, mir fehlt etwas.

Ich habe den folgenden Code in meinem Composable.

// useAsyncFoo.js
export default () => {
  const foo = ref(null);

  someAsyncFn().then(value => foo.value = value);

  return foo;
}

Dann verwende ich es auf meiner Seite so:

<script setup>
const foo = useAsyncFoo();

console.log(foo); // null
</script>

...

Ich hoffe foo 获取承诺返回的值，但它始终是 null.

Ist es in Nuxt 3 üblich, auf Composables zu warten? (await useAsyncFoo()) und als asynchrone Funktion exportieren? Habe ich etwas falsch gemacht?

Answer 1

我花了一个下午的时间尝试将数据从可组合项传输到页面，但最终总是得到奇怪或未定义的数据。阅读这里的评论我终于明白了我错过了什么并设法做到了，所以谢谢！如果有帮助，这是我的文件。

（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>