feat: bug fix

src/hooks/useFetch.ts

@@ -1,4 +1,4 @@
-import { ref, onBeforeUnmount, onDeactivated, shallowRef, unref, getCurrentInstance } from 'vue'
+import { ref, onScopeDispose, shallowRef, unref, getCurrentInstance } from 'vue'
 import type { Ref, ShallowRef } from 'vue'
 import api from '@/api'
 import request from '@/plugins/request'
@@ -94,8 +94,7 @@ function useFetch<K extends ApiKeys>(k: K, ...args: any[]) {
   }
 
   if (getCurrentInstance()) {
-    onBeforeUnmount(cancel)
-    onDeactivated(cancel)
+    onScopeDispose(cancel)
   }
 
   return {

src/hooks/useMessageLoop.ts

@@ -1,5 +1,4 @@
 import { effectScope, onScopeDispose, watch } from 'vue'
-import { useIntervalFn } from '@vueuse/core'
 import uesFetch from '@/hooks/useFetch'
 import useMainStore from '@/store/main'
 
@@ -8,14 +7,29 @@ import type { ExtractApiResponse } from '@/api/api'
 
 const useMessageLoop = () => {
   const mainStore = useMainStore()
-  const { fetch: getUnReadMessage, result: unReadMessage } = uesFetch('getUnReadMessage')
+
+  const { fetch: getUnReadMessage, result: unReadMessage, cancel } = uesFetch('getUnReadMessage')
+
+  let timer: number | null = null
+
+  const cleanTimer = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  const getUnReadMessageFn = () => {
+    getUnReadMessage()
+    cleanTimer()
+    timer = window.setTimeout(getUnReadMessageFn, 30 * 1000)
+  }
 
   watch(
     () => mainStore?.myUserInfo?.role,
     () => {
       if (mainStore?.myUserInfo?.role && mainStore?.myUserInfo?.role !== 'ADMIN') {
-        getUnReadMessage()
-        useIntervalFn(getUnReadMessage, 30 * 1000)
+        getUnReadMessageFn()
       }
     },
     {
@@ -23,6 +37,8 @@ const useMessageLoop = () => {
     }
   )
 
+  onScopeDispose(cleanTimer)
+
   return unReadMessage
 }
 
@@ -32,7 +48,6 @@ function createSharedComposable<Fn extends (...args: any[]) => any>(composable:
   let scope: EffectScope | null
 
   const dispose = () => {
-    console.log('dispose', scope)
     if (scope && --subscribers <= 0) {
       scope.stop()
       state = scope = null