From 24966a3b7d47ef2d2d66fc9419ac545a0b89bf0d 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 16:52:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=92=8C=E6=B8=85=E7=A9=BA=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/infinite-loading/index.page.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/pages/infinite-loading/index.page.vue b/src/pages/infinite-loading/index.page.vue
index babc132..b9e9d40 100644
--- a/src/pages/infinite-loading/index.page.vue
+++ b/src/pages/infinite-loading/index.page.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { toRaw } from 'vue';
 const structuredClone = window.structuredClone || ((obj) => JSON.parse(JSON.stringify(obj)));
 
 const K_INITIAL_CACHE = deepFreeze({
@@ -7,15 +8,19 @@ const K_INITIAL_CACHE = deepFreeze({
   hasMore: true,
 });
 const cache = structuredClone(K_INITIAL_CACHE);
+const updateCache = (newCache: typeof cache) =>
+  Object.assign(cache, Object.fromEntries(Object.entries(newCache).map(([key, value]) => [key, toRaw(value)])));
+const clearCache = () => Object.assign(cache, structuredClone(K_INITIAL_CACHE));
+// XXX: 可以直接把 list 定义在这上面？？？
 </script>
 
 <script setup lang="ts">
 defineOptions({
   beforeRouteEnter: (to, from) => {
-    if (from.name !== 'InfiniteLoadingDetail') Object.assign(cache, structuredClone(K_INITIAL_CACHE)); // 如果来的页面不是详情页，清空缓存。
+    if (from.name !== 'InfiniteLoadingDetail') clearCache(); // 如果来的页面不是详情页，清空缓存。
   },
   beforeRouteLeave: (to, from) => {
-    if (to.name !== 'InfiniteLoadingDetail') Object.assign(cache, structuredClone(K_INITIAL_CACHE)); // 如果去的页面不是详情页，清空缓存。
+    if (to.name !== 'InfiniteLoadingDetail') clearCache(); // 如果去的页面不是详情页，清空缓存。
   },
 });
 
@@ -37,11 +42,7 @@ const loadData = async (page: number) => {
   const data = await response.json();
   list.value = list.value.concat(data);
   const hasMore = list.value.length < 5;
-  {
-    cache.page = page;
-    cache.list = toRaw(list.value);
-    cache.hasMore = hasMore;
-  }
+  updateCache({ page: page + lastCache.page, list: list.value, hasMore });
   return { hasMore };
 };
 </script>