perf: watchEffect改为watch，减少api请求

IdeaLeap · Feb 2, 2023 · ffe90d8 · ffe90d8
1 parent a83eb4b
commit ffe90d8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',