Composabilité asynchrone de Nuxt 3

Question

J'ai le composable asynchrone suivant dans Nuxt 3 mais il ne fonctionne pas comme prévu, venant d'un arrière-plan React, je pense qu'il me manque quelque chose.

J'ai le code suivant dans mon composable.

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

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

  return foo;
}

Puis sur ma page je l'utilise comme ceci :

<script setup>
const foo = useAsyncFoo();

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

...

J'espère foo 获取承诺返回的值，但它始终是 null.

L'attente des composables est-elle courante dans Nuxt 3 ? (await useAsyncFoo()) et l'exporter en fonction asynchrone ? Est-ce que j'ai fait quelque chose de mal?

Answer 1

J'ai passé un après-midi à essayer de transférer des données d'un composable vers une page, mais je me retrouvais toujours avec des données étranges ou indéfinies. En lisant les commentaires ici, j'ai enfin compris ce qui me manquait et j'ai réussi à le faire, alors merci ! Si ça peut aider, voici mon fichier.

(FetchWrapper est un composable que j'ai créé en m'inspirant de cet article donc je n'ai pas besoin d'ajouter un jeton à chaque requête, mais il utilise la méthode Nuxt $fetch.)

Mes objets composables

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

Ma page

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

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