onMounted 中的 useFetch 未在直接链接打开 nuxt3 上获取数据

Question

我使用 来useFetch获取组合 api 中的数据，然后调用组件中 hook 中的函数onMounted，这是代码。

useShows.ts（可组合）

export function useShows(){

    var shows = useState<Show[]>('shows')

    const fetchShows = async() => {
        const {data, pending} = await useFetch<Show[]>('http://localhost:3000/shows')
        shows.value = data.value
    }

    return {shows, fetchShows}
}

显示.vue

<script setup lang="ts">

    var { shows, fetchShows } = useShows()

    onMounted(() => {
        console.log("On mounted called")
        fetchShows()
    })
</script>

<template>
    <div>{{shows}}</div>
</template>

当我/shows从主页导航到它时，它工作正常，但是当我直接打开链接时，localhost/shows它不起作用，只给我空值。

Answer 1

我有完全一样的问题。我通过将其包装在 nextTick 中解决了这个问题。

await nextTick(async () => {
  await fetchShows()
})