mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-01 18:07:22 +00:00
docs: add await
before lazy composable examples
This commit is contained in:
parent
95a0e17898
commit
7e7e006e9b
@ -58,9 +58,9 @@ This composable behaves identically to `useFetch` with the `lazy: true` option s
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const { pending, data: posts } = useLazyFetch('/api/posts')
|
const { pending, data: posts } = await useLazyFetch('/api/posts')
|
||||||
watch(posts, (newPosts) => {
|
watch(posts, (newPosts) => {
|
||||||
// Because posts starts out null, you will not have access
|
// Because posts might start out null, you will not have access
|
||||||
// to its contents immediately, but you can watch it.
|
// to its contents immediately, but you can watch it.
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -119,7 +119,7 @@ This composable behaves identically to `useAsyncData` with the `lazy: true` opti
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
|
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||||
watch(count, (newCount) => {
|
watch(count, (newCount) => {
|
||||||
// Because count starts out null, you won't have access
|
// Because count starts out null, you won't have access
|
||||||
// to its contents immediately, but you can watch it.
|
// to its contents immediately, but you can watch it.
|
||||||
@ -231,7 +231,7 @@ This method is useful if you want to refresh all the data fetching for a current
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
|
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||||
|
|
||||||
const refresh = () => refreshNuxtData('count')
|
const refresh = () => refreshNuxtData('count')
|
||||||
</script>
|
</script>
|
||||||
|
@ -27,10 +27,10 @@ By default, [useAsyncData](/docs/api/composables/use-async-data) blocks navigati
|
|||||||
/* Navigation will occur before fetching is complete.
|
/* Navigation will occur before fetching is complete.
|
||||||
Handle pending and error states directly within your component's template
|
Handle pending and error states directly within your component's template
|
||||||
*/
|
*/
|
||||||
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
|
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||||
|
|
||||||
watch(count, (newCount) => {
|
watch(count, (newCount) => {
|
||||||
// Because count starts out null, you won't have access
|
// Because count might start out null, you won't have access
|
||||||
// to its contents immediately, but you can watch it.
|
// to its contents immediately, but you can watch it.
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
@ -32,9 +32,9 @@ By default, [useFetch](/docs/api/composables/use-fetch) blocks navigation until
|
|||||||
/* Navigation will occur before fetching is complete.
|
/* Navigation will occur before fetching is complete.
|
||||||
Handle pending and error states directly within your component's template
|
Handle pending and error states directly within your component's template
|
||||||
*/
|
*/
|
||||||
const { pending, data: posts } = useLazyFetch('/api/posts')
|
const { pending, data: posts } = await useLazyFetch('/api/posts')
|
||||||
watch(posts, (newPosts) => {
|
watch(posts, (newPosts) => {
|
||||||
// Because posts starts out null, you won't have access
|
// Because posts might start out null, you won't have access
|
||||||
// to its contents immediately, but you can watch it.
|
// to its contents immediately, but you can watch it.
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
@ -62,7 +62,7 @@ This example below refreshes only data where the key matches to `count`.
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
|
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||||
const refresh = () => refreshNuxtData('count')
|
const refresh = () => refreshNuxtData('count')
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
Loading…
Reference in New Issue
Block a user