Nuxt/test/fixtures/basic/pages/useAsyncData/status.vue

50 lines
1.4 KiB
Vue

<script setup lang="ts">
const { status: status1 } = await useAsyncData(() => Promise.resolve(true))
if (status1.value !== 'success') {
throw new Error('status1 should be "success"')
}
const { status: status2 } = await useAsyncData(() => Promise.reject(new Error('boom!')))
if (status2.value !== 'error') {
throw new Error('status2 should be "error"')
}
const { status: status3 } = await useAsyncData(() => Promise.resolve(true), { immediate: false })
if (status3.value !== 'idle') {
throw new Error('status3 should be "idle"')
}
const { status: status4, execute } = await useAsyncData(() => Promise.resolve(true), { immediate: false })
await execute()
if (status4.value !== 'success') {
throw new Error('status4 should be "success"')
}
const { status: status5 } = await useAsyncData(() => Promise.resolve(true), { server: false })
if (import.meta.server && status5.value !== 'idle') {
throw new Error('status5 should be "idle" server side')
}
const status5Values = ref<string[]>([])
watchEffect(() => {
status5Values.value.push(status5.value)
})
</script>
<template>
<div>
Status
<div>
{{ status1 === 'success' }}
{{ status2 === 'error' }}
{{ status3 === 'idle' }}
{{ status4 === 'success' }}
<ClientOnly>
<div id="status5-values">
{{ status5Values.join(',') }}
</div>
</ClientOnly>
</div>
</div>
</template>