marking-cet-web/src/hooks/useMessageLoop.ts

import { effectScope, onScopeDispose, watch } from 'vue'
import { useIntervalFn } from '@vueuse/core'
import uesFetch from '@/hooks/useFetch'
import useMainStore from '@/store/main'

import type { EffectScope, ShallowRef } from 'vue'
import type { ExtractApiResponse } from '@/api/api'

const useMessageLoop = () => {
  const mainStore = useMainStore()
  const { fetch: getUnReadMessage, result: unReadMessage } = uesFetch('getUnReadMessage')

  watch(
    () => mainStore?.myUserInfo?.role,
    () => {
      if (mainStore?.myUserInfo?.role && mainStore?.myUserInfo?.role !== 'ADMIN') {
        getUnReadMessage()
        useIntervalFn(getUnReadMessage, 30 * 1000)
      }
    },
    {
      immediate: true,
    }
  )

  return unReadMessage
}

function createSharedComposable<Fn extends (...args: any[]) => any>(composable: Fn) {
  let subscribers = 0
  let state: ShallowRef<ExtractApiResponse<'getUnReadMessage'>> | null | undefined
  let scope: EffectScope | null

  const dispose = () => {
    console.log('dispose', scope)
    if (scope && --subscribers <= 0) {
      scope.stop()
      state = scope = null
    }
  }

  return () => {
    subscribers++
    if (!state) {
      scope = effectScope(true)
      state = scope.run(composable)
    }
    onScopeDispose(dispose)
    return state
  }
}

export default createSharedComposable(useMessageLoop)