Nuxt3 useFetch 在 slug 更改时不刷新

Question

我正在尝试使用 nuxt3s useFetch 功能来获取页面内容。每当 slug 发生变化时，我想重新获取/刷新。

文档（https://nuxt.com/docs/getting-started/data-fetching）告诉我：

1. URL 是自动监视的，因此如果我的 URL 发生更改，应该始终进行刷新
2. 我可以使用 useFetch 中的

   watch

   属性来刷新

两者都不起作用。我什至尝试用观察者观察蛞蝓并触发

refresh

。也没有成功。不知何故，整个

await useFetch()

再也没有被调用过......

这是我的代码：

<script setup>

const runTimeConfig = useRuntimeConfig()


// Tried to use this, but I don't really understand what that key is for:
// definePageMeta({
//   key: (route) => route.params.slug,
// })

const route = useRoute()
const slug = computed(() => route.params.slug)

const endpoint = `${runTimeConfig.public.API_URL}/wp/v2/pages?slug=${slug.value}`
console.log('endpoint: ', endpoint)

const {
  data: page,
  pending,
  error,
  refresh,
} = await useFetch(endpoint, {
  key: `key-${slug.value}`,
  initialCache: false,
})

console.log('page: ', toRaw(page.value))

现在，如果我更改 slug，我可以看到端点日志显示了正确的 URL。但是如果我登录页面，导航后它会记录：

page:  null

...

而且该值稍后不会更新（首先我认为异步等待的东西无法正常工作）。

Answer 1

您可以通过使用

useRoute().params

作为

useFetch

中的参数来实现这一点，如下所示。

const { data } = await useFetch('/api/get-the-slug', {
    params: useRoute().params
})

useFetch

将自动监视

useRoute

可组合项内的参数。

我这里有一个基本示例，您可以在自己的终端上进行测试。已测试，有效！

~/pages/test-slug/[slug].vue

<script lang="ts" setup>
const { data } = await useFetch('/api/get-the-slug', {
    params: useRoute().params
})

const slugs = ref(['slug-1', 'slug-2', 'slug-3'])

</script>
<template>
    <div>
        <h1>Slug data is: {{ data?.slug }}</h1>
        <div
            v-for="slug in slugs"
            :key="slug"
        >
            <NuxtLink :to="`/test-slug/${slug}`">Navigate To {{ slug }}</NuxtLink>
        </div>
    </div>
</template>
<style scoped lang="css"></style>

API端点示例

~/server/api/get-the-slug.get.ts

export default defineEventHandler((event) => {
    return {
        slug: getQuery(event).slug
    }
})

希望对你有帮助