From ffe90d827e73f097019e4e7ef34f191cfb7a92ae Mon Sep 17 00:00:00 2001
From: Plumbiu <99574369+Plumbiu@users.noreply.github.com>
Date: Thu, 2 Feb 2023 23:23:12 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20watchEffect=E6=94=B9=E4=B8=BAwatch?=
 =?UTF-8?q?=EF=BC=8C=E5=87=8F=E5=B0=91api=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ArticlesList/Item/Mainbar.vue  |  5 ++-
 .../ArticlesList/Navigation/Link.vue          |  9 -----
 frontend/components/ArticlesList/index.vue    | 36 +++++++++----------
 .../composables/Articlelist/useArtlistFn.ts   |  1 -
 4 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/frontend/components/ArticlesList/Item/Mainbar.vue b/frontend/components/ArticlesList/Item/Mainbar.vue
index 135a5a8..492fdf7 100644
--- a/frontend/components/ArticlesList/Item/Mainbar.vue
+++ b/frontend/components/ArticlesList/Item/Mainbar.vue
@@ -6,7 +6,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="py-4">
+  <div class="mainbar">
     <div class="title">
       {{ title }}
     </div>
@@ -17,6 +17,9 @@ defineProps({
 </template>
 
 <style scoped>
+.mainbar {
+  @apply py-4;
+}
 .title {
   @apply truncate text_jj_font_black dark:text-jj_font_white text-[16px] title font-semibold tracking-wide
 }
diff --git a/frontend/components/ArticlesList/Navigation/Link.vue b/frontend/components/ArticlesList/Navigation/Link.vue
index 32a766b..d73f877 100644
--- a/frontend/components/ArticlesList/Navigation/Link.vue
+++ b/frontend/components/ArticlesList/Navigation/Link.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
 const artlistPath = useArtlistPath()
-const atrtlistData = useArtlist([])
-const pagenum = usePagenum()
-const initArtlistData = () => {
-  atrtlistData.value = []
-  pagenum.value = 1
-}
 </script>
 
 <template>
@@ -15,7 +9,6 @@ const initArtlistData = () => {
       :class="`${
         $route.query.sort ? 'text-gray-500' : 'text-link'
       } border-r-1 text_style pl-0`"
-      @click="initArtlistData()"
     >
       推荐
     </NuxtLink>
@@ -24,7 +17,6 @@ const initArtlistData = () => {
       :class="`${
         $route.query.sort === 'newest' ? 'text-link' : 'text-gray-500'
       } border-r-1 text_style`"
-      @click="initArtlistData()"
     >
       最新
     </NuxtLink>
@@ -33,7 +25,6 @@ const initArtlistData = () => {
       :class="`${
         ($route.query.sort && $route.query.sort?.indexOf('hottest') !== -1) ? 'text-link' : 'text-gray-500'
       } text_style`"
-      @click="initArtlistData()"
     >
       热榜
     </NuxtLink>
diff --git a/frontend/components/ArticlesList/index.vue b/frontend/components/ArticlesList/index.vue
index 94925cd..600259e 100644
--- a/frontend/components/ArticlesList/index.vue
+++ b/frontend/components/ArticlesList/index.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
 const route = useRoute()
-const pagenum = usePagenum()
+let pagenum = 0
 const isLoading = useState('isLoading', () => false)
 const isEmpty = useState('isEmpty', () => false)
 const artlistData = useArtlist([])
 const addArtListItem = () => {
   if (useScrollBottom()) {
-    pagenum.value++
-    useFetchPostData(route.path, route.query?.sort, pagenum.value).then((data) => {
+    pagenum++
+    useFetchPostData(route.path, route.query?.sort, pagenum).then((data) => {
       artlistData.value.push(...data)
     })
   }
 }
-watchEffect(() => {
-  if (!artlistData.value.length) {
-    isLoading.value = true
-    useFetchPostData(route.path, route.query?.sort).then((data) => {
-      if (!data.length) {
-        isEmpty.value = true
-        return
-      }
-      artlistData.value = data
-      isLoading.value = false
-      isEmpty.value = false
-    })
-  }
-}, { flush: 'post' })
+watch(route, () => {
+  pagenum = 0
+  artlistData.value = []
+  isLoading.value = true
+  useFetchPostData(route.path, route.query?.sort).then((data) => {
+    if (!data.length) {
+      isEmpty.value = true
+      return
+    }
+    artlistData.value = data
+    isEmpty.value = false
+    isLoading.value = false
+  })
+}, { deep: true, immediate: true })
 onMounted(() => {
   const EmployeeWindow = window as any
   EmployeeWindow.addEventListener('scroll', useThrottle(addArtListItem))
@@ -39,7 +39,7 @@ onUnmounted(() => {
 <template>
   <div class="bg-white box-border">
     <ArticlesListNavigation />
-    <ArticlesListSkeleton v-if="isLoading || isEmpty" />
+    <ArticlesListSkeleton v-if="isLoading && isEmpty" />
     <ul v-else>
       <ArticlesListItem
         v-for="item in artlistData"
diff --git a/frontend/composables/Articlelist/useArtlistFn.ts b/frontend/composables/Articlelist/useArtlistFn.ts
index d7004b5..4bde075 100644
--- a/frontend/composables/Articlelist/useArtlistFn.ts
+++ b/frontend/composables/Articlelist/useArtlistFn.ts
@@ -22,7 +22,6 @@ export const useArtlistPath = (path?: string | undefined) => useState('artlistPa
     return ''
   return path
 })
-export const usePagenum = () => useState('pagenum', () => 1)
 export const useFetchPostData = async (
   type?: string,
   sort: any = 'recommended',