docs: data fetching with suspense

diff --git a/playground/App.vue b/playground/App.vue
index d3c51661ab0d0566922a09ac3045f5a655362bf2..2c63a485b8c91601136be20ae4ac240b8cab9304 100644 (file)
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -114,7 +114,14 @@
       @before-enter="flushWaiter"
       @before-leave="setupWaiter"
     > -->
-    <router-view></router-view>
+    <Suspense>
+      <template #default>
+        <router-view></router-view>
+      </template>
+      <template #fallback>
+        Loading...
+      </template>
+    </Suspense>
     <!-- </transition> -->
   </div>
 </template>

diff --git a/playground/api/index.ts b/playground/api/index.ts
new file mode 100644 (file)
index 0000000..628521c
--- /dev/null
+++ b/playground/api/index.ts
@@ -0,0 +1,11 @@
+export let delay = (t: number = 100) =>
+  new Promise(resolve => setTimeout(resolve, t))
+
+export async function getData() {
+  await delay(500)
+
+  return {
+    message: 'Hello',
+    time: Date.now(),
+  }
+}

diff --git a/playground/views/ComponentWithData.vue b/playground/views/ComponentWithData.vue
index 0d32d8306ee8d78c8ac71423c58b450b2d3bd3c4..857018b080cc958f26c39426ffbefae1647d6b77 100644 (file)
--- a/playground/views/ComponentWithData.vue
+++ b/playground/views/ComponentWithData.vue
@@ -1,23 +1,31 @@
 <template>
   <div>
-    <p>Here is the data: {{ data }}</p>
+    <p>Here is the data: {{ fromApi }}</p>
+    other {{ other }}
   </div>
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs, reactive, inject } from 'vue'
+import { getData, delay } from '../api'
 
 export default defineComponent({
   name: 'ComponentWithData',
-  data: () => ({ data: 'nope' }),
-  beforeRouteEnter(to, from, next) {
-    // console.log('this in beforeRouteEnter', this)
-    // setTimeout(() => {
-    // next(vm => {
-    //   // console.log('got vm', vm)
-    //   vm.data = 'Hola'
-    // })
-    // }, 300)
+  async setup() {
+    const data = reactive({ other: null })
+    data.fromApi = await getData()
+
+    return {
+      ...toRefs(data),
+    }
+  },
+  async beforeRouteEnter(to, from, next) {
+    console.log('this in beforeRouteEnter', this)
+    await delay(300)
+    next(vm => {
+      console.log('got vm', vm)
+      vm.other = 'Hola'
+    })
   },
 })
 </script>