Kebolehkomposan Asynchronous Nuxt 3

Question

Saya mempunyai async composable berikut dalam Nuxt 3 tetapi ia tidak berfungsi seperti yang diharapkan, datang dari latar belakang React, saya rasa saya kehilangan sesuatu.

Saya mempunyai kod berikut dalam composable saya.

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

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

  return foo;
}

Kemudian di halaman saya, saya menggunakannya seperti ini:

<script setup>
const foo = useAsyncFoo();

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

...

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

Adakah menunggu kompos biasa dalam Nuxt 3? (await useAsyncFoo()) dan eksportnya sebagai fungsi async? Adakah saya melakukan sesuatu yang salah?

Answer 1

Saya menghabiskan waktu petang cuba memindahkan data daripada composable ke halaman tetapi sentiasa berakhir dengan data yang pelik atau tidak ditentukan. Membaca komen di sini akhirnya saya tahu apa yang saya hilang dan berjaya melakukannya, jadi terima kasih! Jika ia membantu, inilah fail saya.

(FetchWrapper ialah kompos yang saya buat berdasarkan artikel ini jadi saya tidak perlu menambah token pada setiap permintaan, tetapi ia menggunakan kaedah Nuxt $fetch.)

Barang boleh gubah saya

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

Halaman saya

<script setup>
  const { bar, getApiData } = useFoo()
  await getApiData()
</script>

<template>
  {{ bar }}
</template>