Nuxt 3 非同步可組合性

Question

我在 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()) 並將其匯出為非同步函數？我做錯了什麼嗎？

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>