From 89eae5bcbbb50a5b0dc9fb3d55be6939b771dccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Fri, 20 Dec 2024 14:53:31 +0800
Subject: [PATCH] defineColadaLoader

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   8 +
 .../index.page.vue}                           |   9 ++
 .../data-loaders.[id]/sub-1.[userId].page.vue | 141 ++++++++++++++++++
 typed-router.d.ts                             |   1 +
 5 files changed, 160 insertions(+)
 rename src/pages/{data-loaders.[id].vue => data-loaders.[id]/index.page.vue} (89%)
 create mode 100644 src/pages/data-loaders.[id]/sub-1.[userId].page.vue

diff --git a/package.json b/package.json
index 9424dfc..2f48ba9 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   "dependencies": {
     "@alova/adapter-axios": "^2.0.12",
     "@intlify/unplugin-vue-i18n": "^6.0.1",
+    "@pinia/colada": "^0.13.0",
     "@primevue/themes": "^4.2.5",
     "@unhead/vue": "^1.11.14",
     "@vant/use": "^1.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc4285a..94e56c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@intlify/unplugin-vue-i18n':
         specifier: ^6.0.1
         version: 6.0.1(@vue/compiler-dom@3.5.13)(eslint@9.17.0(jiti@2.4.2))(rollup@4.28.1)(typescript@5.7.2)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
+      '@pinia/colada':
+        specifier: ^0.13.0
+        version: 0.13.0
       '@primevue/themes':
         specifier: ^4.2.5
         version: 4.2.5
@@ -1020,6 +1023,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@pinia/colada@0.13.0':
+    resolution: {integrity: sha512-Ah6uv1spRCu3I0QmimOMwrkKMcQK1+Ov2Qroz4PFD2/i9gwRUddj7Pz9kNcg5xXp2WWEPmnvkhTr2GgdqTUaUQ==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -5849,6 +5855,8 @@ snapshots:
   '@oxc-resolver/binding-win32-x64-msvc@2.1.1':
     optional: true
 
+  '@pinia/colada@0.13.0': {}
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
diff --git a/src/pages/data-loaders.[id].vue b/src/pages/data-loaders.[id]/index.page.vue
similarity index 89%
rename from src/pages/data-loaders.[id].vue
rename to src/pages/data-loaders.[id]/index.page.vue
index ad1481b..43f4057 100644
--- a/src/pages/data-loaders.[id].vue
+++ b/src/pages/data-loaders.[id]/index.page.vue
@@ -33,6 +33,8 @@ const {
   reload, // a function to refetch the data without navigating
 } = usePageData();
 
+const route = useRoute('DataLoadersId');
+
 watch(
   pageData,
   (pageDataVal) => {
@@ -50,6 +52,13 @@ watch(
 
 <template>
   <h1>Data Loaders</h1>
+  <ul>
+    <li>
+      <RouterLink class="green" :to="{ name: 'DataLoadersIdSub1UserId', params: { id: route.params.id, userId: '1' } }"
+        >sub-1</RouterLink
+      >
+    </li>
+  </ul>
   <div flex="~ row">
     <button class="green" @click="$router.back()">Back</button>
     <button class="green" @click="reload()">Reload</button>
diff --git a/src/pages/data-loaders.[id]/sub-1.[userId].page.vue b/src/pages/data-loaders.[id]/sub-1.[userId].page.vue
new file mode 100644
index 0000000..674f1ea
--- /dev/null
+++ b/src/pages/data-loaders.[id]/sub-1.[userId].page.vue
@@ -0,0 +1,141 @@
+<script lang="ts">
+import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada';
+
+async function getUserById(id: string, { signal }: { signal?: AbortSignal }) {
+  console.warn('[getUserById] 被调用, id :>> ', id);
+  setTimeout(() => {
+    console.log('5s 已过', 'id :>> ', id);
+  }, 5000);
+  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, { signal });
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  return await res.json();
+}
+
+export const useUserData = defineColadaLoader('DataLoadersIdSub1UserId', {
+  async query(to, { signal }) {
+    console.debug('[defineColadaLoader] query');
+    return getUserById(to.params.userId, { signal });
+  },
+  key: (to) => ['users', to.params.userId],
+  // Keep the data "fresh" 10 seconds to avoid fetching the same data too often
+  // 保持数据“新鲜”10秒，以避免过于频繁地获取相同的数据
+  staleTime: 5000,
+});
+</script>
+
+<script setup lang="ts">
+const { data: user, status, error, isLoading, reload, refresh } = useUserData();
+
+const route = useRoute('DataLoadersIdSub1UserId');
+</script>
+
+<template>
+  <div flex="~ row">
+    <button class="green" @click="$router.back()">Back</button>
+  </div>
+  <h1>Pinia Colada Loader Example</h1>
+  <pre>route.params: {{ route.params }}</pre>
+
+  <fieldset>
+    <legend>Controls</legend>
+
+    <button @click="refresh()">Refresh</button>
+    <button @click="reload()">Refetch</button>
+  </fieldset>
+
+  <div class="flex items-center">
+    <RouterLink :to="{ params: { userId: (Number(route.params.userId) || 0) - 1 } }">
+      Previous
+      {{ (Number(route.params.userId) || 0) - 1 }}
+    </RouterLink>
+    |
+    <RouterLink :to="{ params: { userId: (Number(route.params.userId) || 0) + 1 } }">
+      Next {{ (Number(route.params.userId) || 0) + 1 }}
+    </RouterLink>
+  </div>
+
+  <h2>State</h2>
+
+  <p>
+    <code>status: {{ status }}</code>
+    <br />
+    <code>isLoading: {{ isLoading }}</code>
+  </p>
+  <pre v-if="error">Error: {{ error }}</pre>
+  <pre v-else>{{ user == null ? String(user) : user }}</pre>
+</template>
+
+<style scoped>
+.green {
+  background-color: #42b883;
+  color: #ffffff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 16px;
+}
+
+fieldset {
+  border: 1px solid #4a4a4a;
+  padding: 16px;
+  margin: 16px 0;
+  border-radius: 8px;
+  background-color: #2a2a2a;
+}
+
+legend {
+  padding: 0 8px;
+  color: #b3b3b3;
+}
+
+button {
+  margin-right: 8px;
+  padding: 6px 12px;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: #333333;
+  color: #ffffff;
+}
+
+button:hover {
+  background-color: #444444;
+}
+
+pre {
+  background-color: #1e1e1e;
+  padding: 16px;
+  border-radius: 6px;
+  overflow-x: auto;
+  color: #e0e0e0;
+}
+
+code {
+  background-color: #2a2a2a;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #e0e0e0;
+}
+
+a {
+  color: #42b883;
+  text-decoration: none;
+  padding: 4px 8px;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #5ccfaa;
+}
+
+h1 {
+  color: #e0e0e0;
+  margin-bottom: 20px;
+}
+
+h2 {
+  color: #42b883;
+  margin-top: 24px;
+}
+</style>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index f2760cb..5944af5 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -24,6 +24,7 @@ declare module 'vue-router/auto-routes' {
     'AA': RouteRecordInfo<'AA', '/a/a', Record<never, never>, Record<never, never>>,
     'Api': RouteRecordInfo<'Api', '/api', Record<never, never>, Record<never, never>>,
     'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'DataLoadersIdSub1UserId': RouteRecordInfo<'DataLoadersIdSub1UserId', '/data-loaders/:id/sub-1/:userId', { id: ParamValue<true>, userId: ParamValue<true> }, { id: ParamValue<false>, userId: ParamValue<false> }>,
     'IndexPage': RouteRecordInfo<'IndexPage', '/index-page', Record<never, never>, Record<never, never>>,
     'InfiniteLoading': RouteRecordInfo<'InfiniteLoading', '/infinite-loading', Record<never, never>, Record<never, never>>,
     'MdPage': RouteRecordInfo<'MdPage', '/md-page', Record<never, never>, Record<never, never>>,