From 49da2ee1d8d104b780e80a96c34a7fb66a6a49f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Thu, 2 Jan 2025 14:46:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=BF=94=E5=9B=9E=E7=B1=BB=E5=9E=8B=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/data-loaders.[id]/sub-1.[userId].page.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/data-loaders.[id]/sub-1.[userId].page.vue b/src/pages/data-loaders.[id]/sub-1.[userId].page.vue
index a01c4fa..c427a6a 100644
--- a/src/pages/data-loaders.[id]/sub-1.[userId].page.vue
+++ b/src/pages/data-loaders.[id]/sub-1.[userId].page.vue
@@ -9,7 +9,7 @@ async function getUserById(userId: string, { signal }: { signal?: AbortSignal })
   }, 1000 * 10);
   const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, { signal });
   await new Promise((resolve) => setTimeout(resolve, 300));
-  return await res.json();
+  return (await res.json()) as Record<string, unknown>;
 }
 
 export const useUserData = defineColadaLoader('DataLoadersIdSub1UserId', {
@@ -62,14 +62,15 @@ const route = useRoute('DataLoadersIdSub1UserId');
   </div>
 
   <h2>State</h2>
-
+  <!-- user 是 ShallowRef 的，所以修改 user 的属性不会触发重新渲染 -->
+  <button @click="user.name = 'Changed name'">Change user data</button>
   <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>
+  <pre v-else>user: <p>{{ user == null ? String(user) : user }}</p></pre>
 </template>
 
 <style scoped lang="less">