Nuxt 3: useAsyncData dan $fetch hanya berfungsi sekali

Question

Saya menggunakan nuxt 3 dalam projek dan saya ingin membuat permintaan kepada fail skrip taip dalam direktori /server/api/. Tetapi apabila saya melakukan ini dalam app.vue fail:

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

Apabila saya memanggil fungsi ini createPerson:

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

Apl saya hanya mengambil "/api/file" sekali dan tidak mengambilnya semula. Jika saya menggunakan fungsi muat semula yang disediakan oleh useAsyncData, saya mempunyai dua pengambilan apabila butang diklik buat kali pertama dan satu pengambilan selepas itu.

Answer 1

Untuk menjawab soalan anda, anda perlu menambah kunci untuk menggunakan AsyncData untuk memaksa muat semula permintaan anda. Sebab mengapa pengambilan semula tidak berlaku ialah createPerson kekal tidak berubah sebagai kunci, jadi tiada pengambilan semula dilakukan. Jadi apa yang anda perlu lakukan ialah menjana kunci rawak menggunakan kaedah useAsyncData kegemaran anda

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

Anda juga mempunyai pilihan untuk menggunakan fungsi muat semula tanpa perlu risau tentang kunci. Semak dokumentasi ini https://nuxt.com/docs/getting-started/data-fetching#refreshing-data