From 48d886c860c8cb1525d466bb222eca581333ab5b Mon Sep 17 00:00:00 2001
From: Ada J <45652366+666de6@users.noreply.github.com>
Date: Thu, 14 Apr 2022 16:53:58 +0800
Subject: [PATCH] docs(api): document `useError` , `useLazyAsyncData` and
 `useLazyFetch` (#4341)

* docs: add documents for use-error,use-lazy-async-data and use-lazy-fetch

* docs(API): document useError,useLazyAsyncData and useLazyFetch

Co-authored-by: xiaojie.jiang <xiaojie.jiang@dhc.com.cn>
---
 docs/content/3.api/1.composables/use-error.md | 13 ++++++--
 .../1.composables/use-lazy-async-data.md      | 25 +++++++++++++--
 .../3.api/1.composables/use-lazy-fetch.md     | 31 +++++++++++++++++--
 docs/content/3.api/3.utils/clear-error.md     |  2 +-
 4 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-error.md b/docs/content/3.api/1.composables/use-error.md
index 5e5a725bb5..faffb16691 100644
--- a/docs/content/3.api/1.composables/use-error.md
+++ b/docs/content/3.api/1.composables/use-error.md
@@ -1,7 +1,14 @@
 # `useError`
 
+Nuxt provides a composable to catch global errors.
+
+This function will return the global Nuxt error that is being handled.
+
+```ts
+const error = useError()
+```
+
+`useError` set an error in state, create a reactive and SSR-friendly global Nuxt error across components.
+
 ::ReadMore{link="/guide/features/error-handling"}
 ::
-
-::NeedContribution
-::
diff --git a/docs/content/3.api/1.composables/use-lazy-async-data.md b/docs/content/3.api/1.composables/use-lazy-async-data.md
index 2ea79ab87f..c4643bb451 100644
--- a/docs/content/3.api/1.composables/use-lazy-async-data.md
+++ b/docs/content/3.api/1.composables/use-lazy-async-data.md
@@ -1,10 +1,29 @@
 # `useLazyAsyncData`
 
-::ReadMore{link="/guide/features/data-fetching"}
-::
+This composable behaves identically to [useAsyncData](/api/composables/use-async-data) with the `lazy: true` option set.  
+
+Otherwise, this function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
 
 ::ReadMore{link="/api/composables/use-async-data"}
 ::
 
-::NeedContribution
+## Example
+
+```vue
+<template>
+  <div>
+    {{ pending ? 'Loading' : count }}
+  </div>
+</template>
+
+<script setup>
+const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+watch(count, (newCount) => {
+  // Because count starts out null, you won't have access
+  // to its contents immediately, but you can watch it.
+})
+</script>
+```
+
+::ReadMore{link="/guide/features/data-fetching"}
 ::
diff --git a/docs/content/3.api/1.composables/use-lazy-fetch.md b/docs/content/3.api/1.composables/use-lazy-fetch.md
index 1f7a1acff9..da7220d97f 100644
--- a/docs/content/3.api/1.composables/use-lazy-fetch.md
+++ b/docs/content/3.api/1.composables/use-lazy-fetch.md
@@ -1,10 +1,35 @@
 # `useLazyFetch`
 
-::ReadMore{link="/guide/features/data-fetching"}
-::
+This composable behaves identically to [useFetch](/api/composables/use-fetch) with the `lazy: true` option set.  
+
+Otherwise, this function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
 
 ::ReadMore{link="/api/composables/use-fetch"}
 ::
 
-::NeedContribution
+## Example
+
+```vue
+<template>
+  <!-- you'll need to handle a loading state -->
+  <div v-if="pending">
+    Loading ...
+  </div>
+  <div v-else>
+    <div v-for="post in posts">
+      <!-- do something -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { pending, data: posts } = useLazyFetch('/api/posts')
+watch(posts, (newPosts) => {
+  // Because posts starts out null, you won't have access
+  // to its contents immediately, but you can watch it.
+})
+</script>
+```
+
+::ReadMore{link="/guide/features/data-fetching"}
 ::
diff --git a/docs/content/3.api/3.utils/clear-error.md b/docs/content/3.api/3.utils/clear-error.md
index e72c2e1089..e92a716ecc 100644
--- a/docs/content/3.api/3.utils/clear-error.md
+++ b/docs/content/3.api/3.utils/clear-error.md
@@ -18,7 +18,7 @@ clearError()
 clearError({ redirect: '/homepage' })
 ```
 
-Errors are set in state using [`useError()`](/api/composables/useError). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
+Errors are set in state using [`useError()`](/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
 
 ::ReadMore{link="/guide/features/error-handling"}
 ::