vue.js Nuxt 3:useAsyncData与$fetch只工作一次

dsf9zpds  于 2023-03-24  发布在  Vue.js
关注(0)|答案(2)|浏览(628)

我正在为一个项目使用nuxt 3,我想向/server/api/目录中的一个typescript文件发出请求。但是当我在我的文件app.vue中这样做时:

<script setup lang="ts">
const createPerson = async () => {
    console.log('create person')
    const data = await useAsyncData('createPerson', () => $fetch('/api/file', {
        method: 'POST',
        headers: useRequestHeaders(['cookie']),
        body: JSON.stringify({
            lastname: fields.value.lastname,
            firstname: fields.value.firstname,
            age: fields.value.age,
            x: fields.value.x,
            y: fields.value.y,
            bio: fields.value.bio
        })
    }))
    console.log(data)
}
</script>

当我调用createPerson函数时:

<button @click="createPerson">Apply</button>

我的应用程序只获取'/API/file'一次,而不是重新获取。如果我使用useAsyncData提供的刷新功能,第一次点击按钮时,我有两次获取,一次获取后。

ao218c7q

ao218c7q1#

如果您不需要useAsyncData/useFetch的额外功能,您可以通过单独使用$fetch实用程序来简化。

<script lang="ts" setup>
const createPerson = async () => {
  const data = await $fetch('/api/file', {
    method: 'POST',
    headers: useRequestHeaders(['cookie']),
    body: {
      lastname: fields.value.lastname,
      firstname: fields.value.firstname,
      age: fields.value.age,
      x: fields.value.x,
      y: fields.value.y,
      bio: fields.value.bio,
    },
  })

  // ...
}
</script>

您也不需要使用JSON.stringifyh3提供了useBody组合函数,它将解析请求的主体。

// server/api/file.ts
export default defineEventHandler(async ({ req }) => {
  const { age, bio, firstname, lastname, x, y } = await useBody(req)

  // ...
})
63lcw9qa

63lcw9qa2#

要回答你的问题,你需要添加一个键到useAsyncData来强制刷新你的请求。重新获取不发生的原因是因为createPerson作为键保持不变,所以不执行重新获取。所以你需要做的就是使用你喜欢的useAsyncData方法生成一个随机键

<script setup lang="ts">
    const createPerson = async () => {
        console.log('create person')
        const data = await useAsyncData(RANDOM_KEY, () => $fetch('/api/file', {
            method: 'POST',
            headers: useRequestHeaders(['cookie']),
            body: JSON.stringify({
                lastname: fields.value.lastname,
                firstname: fields.value.firstname,
                age: fields.value.age,
                x: fields.value.x,
                y: fields.value.y,
                bio: fields.value.bio
            })
        }))
        console.log(data)
    }
    </script>

您还可以选择使用刷新功能,而不必担心密钥。https://nuxt.com/docs/getting-started/data-fetching#refreshing-data

相关问题