From b31d605ed48215db961575d05e9f86defac7a793 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 19:15:07 +0800
Subject: [PATCH] docs(List): use composition api

---
 src/list/README.md       | 116 +++++++++++++++++++++++----------------
 src/list/README.zh-CN.md | 116 +++++++++++++++++++++++----------------
 src/list/demo/index.vue  |  73 +++++++++++++-----------
 3 files changed, 177 insertions(+), 128 deletions(-)

diff --git a/src/list/README.md b/src/list/README.md
index 365c7a5c3..22810c425 100644
--- a/src/list/README.md
+++ b/src/list/README.md
@@ -20,37 +20,43 @@ app.use(List);
 
 ```html
 <van-list
-  v-model:loading="loading"
-  :finished="finished"
+  v-model:loading="state.loading"
+  :finished="state.finished"
   finished-text="Finished"
   @load="onLoad"
 >
-  <van-cell v-for="item in list" :key="item" :title="item" />
+  <van-cell v-for="item in state.list" :key="item" :title="item" />
 </van-list>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       list: [],
       loading: false,
       finished: false,
-    };
-  },
-  methods: {
-    onLoad() {
+    });
+
+    const onLoad = () => {
       setTimeout(() => {
         for (let i = 0; i < 10; i++) {
-          this.list.push(this.list.length + 1);
+          state.list.push(state.list.length + 1);
         }
-        this.loading = false;
+        state.loading = false;
 
-        if (this.list.length >= 40) {
-          this.finished = true;
+        if (state.list.length >= 40) {
+          state.finished = true;
         }
       }, 1000);
-    },
+    };
+
+    return {
+      state,
+      onLoad,
+    };
   },
 };
 ```
@@ -59,30 +65,36 @@ export default {
 
 ```html
 <van-list
-  v-model:loading="loading"
-  v-model:error="error"
+  v-model:loading="state.loading"
+  v-model:error="state.error"
   error-text="Request failed. Click to reload"
   @load="onLoad"
 >
-  <van-cell v-for="item in list" :key="item" :title="item" />
+  <van-cell v-for="item in state.list" :key="item" :title="item" />
 </van-list>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       list: [],
       error: false,
       loading: false,
-    };
-  },
-  methods: {
-    onLoad() {
+    });
+
+    const onLoad = () => {
       fetchSomeThing().catch(() => {
-        this.error = true;
+        state.error = true;
       });
-    },
+    };
+
+    return {
+      state,
+      onLoad,
+    };
   },
 };
 ```
@@ -90,51 +102,59 @@ export default {
 ### PullRefresh
 
 ```html
-<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+<van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
   <van-list
-    v-model:loading="loading"
-    :finished="finished"
+    v-model:loading="state.loading"
+    :finished="state.finished"
     finished-text="Finished"
     @load="onLoad"
   >
-    <van-cell v-for="item in list" :key="item" :title="item" />
+    <van-cell v-for="item in state.list" :key="item" :title="item" />
   </van-list>
 </van-pull-refresh>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       list: [],
       loading: false,
       finished: false,
       refreshing: false,
-    };
-  },
-  methods: {
-    onLoad() {
+    });
+
+    const onLoad = () => {
       setTimeout(() => {
-        if (this.refreshing) {
-          this.list = [];
-          this.refreshing = false;
+        if (state.refreshing) {
+          state.list = [];
+          state.refreshing = false;
         }
 
         for (let i = 0; i < 10; i++) {
-          this.list.push(this.list.length + 1);
+          state.list.push(state.list.length + 1);
         }
-        this.loading = false;
+        state.loading = false;
 
-        if (this.list.length >= 40) {
-          this.finished = true;
+        if (state.list.length >= 40) {
+          state.finished = true;
         }
       }, 1000);
-    },
-    onRefresh() {
-      this.finished = false;
-      this.loading = true;
-      this.onLoad();
-    },
+    };
+
+    const onRefresh = () => {
+      state.finished = false;
+      state.loading = true;
+      onLoad();
+    };
+
+    return {
+      state,
+      onLoad,
+      onRefresh,
+    };
   },
 };
 ```
diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md
index 9dfb6e03a..0342b674a 100644
--- a/src/list/README.zh-CN.md
+++ b/src/list/README.zh-CN.md
@@ -22,42 +22,48 @@ List 组件通过 `loading` 和 `finished` 两个变量控制加载状态，当
 
 ```html
 <van-list
-  v-model:loading="loading"
-  :finished="finished"
+  v-model:loading="state.loading"
+  :finished="state.finished"
   finished-text="没有更多了"
   @load="onLoad"
 >
-  <van-cell v-for="item in list" :key="item" :title="item" />
+  <van-cell v-for="item in state.list" :key="item" :title="item" />
 </van-list>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       list: [],
       loading: false,
       finished: false,
-    };
-  },
-  methods: {
-    onLoad() {
+    });
+
+    const onLoad = () => {
       // 异步更新数据
       // setTimeout 仅做示例，真实场景中一般为 ajax 请求
       setTimeout(() => {
         for (let i = 0; i < 10; i++) {
-          this.list.push(this.list.length + 1);
+          state.list.push(state.list.length + 1);
         }
 
         // 加载状态结束
-        this.loading = false;
+        state.loading = false;
 
         // 数据全部加载完成
-        if (this.list.length >= 40) {
-          this.finished = true;
+        if (state.list.length >= 40) {
+          state.finished = true;
         }
       }, 1000);
-    },
+    };
+
+    return {
+      state,
+      onLoad,
+    };
   },
 };
 ```
@@ -68,30 +74,36 @@ export default {
 
 ```html
 <van-list
-  v-model:loading="loading"
-  v-model:error="error"
+  v-model:loading="state.loading"
+  v-model:error="state.error"
   error-text="请求失败，点击重新加载"
   @load="onLoad"
 >
-  <van-cell v-for="item in list" :key="item" :title="item" />
+  <van-cell v-for="item in state.list" :key="item" :title="item" />
 </van-list>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       list: [],
       error: false,
       loading: false,
-    };
-  },
-  methods: {
-    onLoad() {
+    });
+
+    const onLoad = () => {
       fetchSomeThing().catch(() => {
-        this.error = true;
+        state.error = true;
       });
-    },
+    };
+
+    return {
+      state,
+      onLoad,
+    };
   },
 };
 ```
@@ -101,55 +113,63 @@ export default {
 List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果。
 
 ```html
-<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+<van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
   <van-list
-    v-model:loading="loading"
-    :finished="finished"
+    v-model:loading="state.loading"
+    :finished="state.finished"
     finished-text="没有更多了"
     @load="onLoad"
   >
-    <van-cell v-for="item in list" :key="item" :title="item" />
+    <van-cell v-for="item in state.list" :key="item" :title="item" />
   </van-list>
 </van-pull-refresh>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       list: [],
       loading: false,
       finished: false,
       refreshing: false,
-    };
-  },
-  methods: {
-    onLoad() {
+    });
+
+    const onLoad = () => {
       setTimeout(() => {
-        if (this.refreshing) {
-          this.list = [];
-          this.refreshing = false;
+        if (state.refreshing) {
+          state.list = [];
+          state.refreshing = false;
         }
 
         for (let i = 0; i < 10; i++) {
-          this.list.push(this.list.length + 1);
+          state.list.push(state.list.length + 1);
         }
-        this.loading = false;
+        state.loading = false;
 
-        if (this.list.length >= 40) {
-          this.finished = true;
+        if (state.list.length >= 40) {
+          state.finished = true;
         }
       }, 1000);
-    },
-    onRefresh() {
+    };
+
+    const onRefresh = () => {
       // 清空列表数据
-      this.finished = false;
+      state.finished = false;
 
       // 重新加载数据
       // 将 loading 设置为 true，表示处于加载状态
-      this.loading = true;
-      this.onLoad();
-    },
+      state.loading = true;
+      onLoad();
+    };
+
+    return {
+      state,
+      onLoad,
+      onRefresh,
+    };
   },
 };
 ```
diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue
index b04c24229..a8721cc2c 100644
--- a/src/list/demo/index.vue
+++ b/src/list/demo/index.vue
@@ -38,54 +38,56 @@
   </van-tabs>
 </template>
 
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      errorInfo: '错误提示',
-      errorText: '请求失败，点击重新加载',
-      pullRefresh: '下拉刷新',
-      finishedText: '没有更多了',
-    },
-    'en-US': {
-      errorInfo: 'Error Info',
-      errorText: 'Request failed. Click to reload',
-      pullRefresh: 'PullRefresh',
-      finishedText: 'Finished',
-    },
-  },
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    errorInfo: '错误提示',
+    errorText: '请求失败，点击重新加载',
+    pullRefresh: '下拉刷新',
+    finishedText: '没有更多了',
+  },
+  'en-US': {
+    errorInfo: 'Error Info',
+    errorText: 'Request failed. Click to reload',
+    pullRefresh: 'PullRefresh',
+    finishedText: 'Finished',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       list: [
         {
-          items: [],
+          items: [] as string[],
           refreshing: false,
           loading: false,
           error: false,
           finished: false,
         },
         {
-          items: [],
+          items: [] as string[],
           refreshing: false,
           loading: false,
           error: false,
           finished: false,
         },
         {
-          items: [],
+          items: [] as string[],
           refreshing: false,
           loading: false,
           error: false,
           finished: false,
         },
       ],
-    };
-  },
+    });
 
-  methods: {
-    onLoad(index) {
-      const list = this.list[index];
+    const onLoad = (index: number) => {
+      const list = state.list[index];
       list.loading = true;
 
       setTimeout(() => {
@@ -96,7 +98,7 @@ export default {
 
         for (let i = 0; i < 10; i++) {
           const text = list.items.length + 1;
-          list.items.push(text < 10 ? '0' + text : text);
+          list.items.push(text < 10 ? '0' + text : String(text));
         }
 
         list.loading = false;
@@ -113,12 +115,19 @@ export default {
           list.finished = true;
         }
       }, 1000);
-    },
+    };
 
-    onRefresh(index) {
-      this.list[index].finished = false;
-      this.onLoad(index);
-    },
+    const onRefresh = (index: number) => {
+      state.list[index].finished = false;
+      onLoad(index);
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onLoad,
+      onRefresh,
+    };
   },
 };
 </script>