fix: watchEffect重复调用问题

IdeaLeap · Jan 30, 2023 · b416954 · b416954
1 parent 45f5d1b
commit b416954
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 13 deletions.
diff --git a/frontend/components/Articles/Item.vue b/frontend/components/Articles/Item.vue
@@ -11,8 +11,8 @@ const format = (num: number) => {
 </script>
 
 <template>
-  <li v-for="artItem in artlistItem" :key="artItem.id" class="flex justify-between items-center py-4 transition-all bg-white hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer">
-    <NuxtLink class="flex-1 pl-5 truncate" :to="`/article/${artItem.id}`">
+  <li v-for="artItem in artlistItem" :key="artItem.id" class="f-c-c py-4 transition-all bg-white hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer">
+    <NuxtLink class="flex-1 pl-[1.67rem] truncate" :to="`/article/${artItem.id}`">
       <div class="flex items-center pr-4 text-[13px]">
         <span class="text-jj_sec-app px-3 border-r-1 pl-0">{{ artItem.authorId.name }}</span>
         <span class="text-jj_thirdly px-3 border-r-1">{{ formatTime(artItem.createdAt) }}</span>
@@ -46,7 +46,7 @@ const format = (num: number) => {
         </div>
       </div>
     </NuxtLink>
-    <div class="px-4">
+    <div class="px-[1.67rem]">
       <nuxt-img
         v-if="artItem.cover"
         :src="artItem.cover"

diff --git a/frontend/components/Articles/Navigation/Link.vue b/frontend/components/Articles/Navigation/Link.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 const artlistPath = useArtlistPath()
+const atrtlistData = useArtlist([])
+const initArtlistData = () => {
+  atrtlistData.value = []
+}
 </script>
 
 <template>
@@ -8,7 +12,8 @@ const artlistPath = useArtlistPath()
       :to="`${artlistPath === '' ? '/' : artlistPath}`"
       :class="`${
         $route.query.sort ? 'text-gray-500' : 'text-link'
-      } border-r-1 focus:text-link hover:text-link`"
+      } border-r-1 focus:text-link hover:text-link pl-0`"
+      @click="initArtlistData()"
     >
       推荐
     </NuxtLink>
@@ -17,6 +22,7 @@ const artlistPath = useArtlistPath()
       :class="`${
         $route.query.sort === 'newest' ? 'text-link' : 'text-gray-500'
       } border-r-1 focus:text-link hover:text-link`"
+      @click="initArtlistData()"
     >
       最新
     </NuxtLink>
@@ -25,6 +31,7 @@ const artlistPath = useArtlistPath()
       :class="`${
         ($route.query.sort && $route.query.sort?.indexOf('hottest') !== -1) ? 'text-link' : 'text-gray-500'
       } focus:text-link hover:text-link`"
+      @click="initArtlistData()"
     >
       热榜
     </NuxtLink>

diff --git a/frontend/components/Articles/Navigation/index.vue b/frontend/components/Articles/Navigation/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex text-[13.67px] bg-[var(--jjext-color-secondary-bg)] border-b-1">
+  <div class="flex text-[1.17rem] pl-[1.67rem] bg-[var(--jjext-color-secondary-bg)] border-b-1">
     <ArticlesNavigationLink />
     <ArticlesNavigationSelect />
   </div>

diff --git a/frontend/components/Articles/index.vue b/frontend/components/Articles/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const route = useRoute()
-let pagenum = 0
+let pagenum = 1
 const isLoading = useState('isLoading', () => false)
-const artlistData = useArtlist(await useFetchPostData())
+const artlistData = useArtlist([])
 const addArtListItem = () => {
   if (useScrollBottom()) {
     pagenum++
@@ -11,12 +11,18 @@ const addArtListItem = () => {
     })
   }
 }
+
 watchEffect(() => {
-  isLoading.value = true
-  useFetchPostData(route.path, route.query?.sort).then((data) => {
-    artlistData.value = data
-    isLoading.value = false
-  })
+  pagenum = 1
+  if (!artlistData.value.length) {
+    isLoading.value = true
+    useFetchPostData(route.path, route.query?.sort).then((data) => {
+      if (!data.length)
+        return
+      artlistData.value = data
+      isLoading.value = false
+    })
+  }
 }, { flush: 'post' })
 onMounted(() => {
   const EmployeeWindow = window as any

diff --git a/frontend/composables/useArtlistFn.ts b/frontend/composables/useArtlistFn.ts
@@ -1,5 +1,5 @@
 import type { IArticleItem } from '~~/types/IArticleItem'
-export function formatTime(createdAt: string): string {
+export const formatTime = (createdAt: string): string => {
   const created = new Date(createdAt)
   const now = new Date()
   const duration = (now.getTime() - created.getTime()) / 1000 / 60

diff --git a/frontend/types/IArticleItem.ts b/frontend/types/IArticleItem.ts
@@ -17,6 +17,7 @@ interface IArticleItem {
   createdAt: string
   authorId: IAuthor
   tagIds: { data: ITagItem[] }
+  error?: boolean
 }
 export {
   IArticleItem,