`useDetailLoader` 组合函数封装（支持自动加载 + 页面判断 + 防重复）-优快云博客

本文链接：https://blog.youkuaiyun.com/Jinxiansen0211/article/details/149066775

🧩 `useDetailLoader` 组合函数封装（支持自动加载 + 页面判断 + 防重复）

✅ 功能特点

✅ 自动监听 query.id（或指定字段）
✅ 只在指定页面名称时才触发（避免跳转到其他页面时误触发）
✅ 避免同一 id 重复加载
✅ 支持初始加载和浏览器返回场景
✅ 支持动态更新 loading 状态

📦 useDetailLoader.ts

// composables/useDetailLoader.ts
import { watch, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

interface UseDetailLoaderOptions {
  routeName: string            // 当前页面 name
  queryKey?: string            // 监听的 query 字段名，默认 'id'
  immediate?: boolean          // 是否立即加载
  fetch: (id: string) => Promise<any>  // 请求函数（返回 Promise）
  onSuccess?: (data: any) => void      // 成功回调
  onError?: (err: any) => void         // 失败回调
}

export function useDetailLoader(options: UseDetailLoaderOptions) {
  const route = useRoute()
  const idKey = options.queryKey || 'id'
  const currentId = ref<string | null>(null)
  const loading = ref(false)

  const load = async (id: string) => {
    if (!id || id === currentId.value) return
    currentId.value = id
    loading.value = true

    try {
      const data = await options.fetch(id)
      options.onSuccess?.(data)
    } catch (err) {
      options.onError?.(err)
      console.error('详情加载失败', err)
    } finally {
      loading.value = false
    }
  }

  // 初始加载
  onMounted(() => {
    const id = route.query[idKey]
    if (options.immediate && typeof id === 'string' && route.name === options.routeName) {
      load(id)
    }
  })

  // 监听 ID 变化
  watch(() => route.query[idKey], (newId) => {
    if (route.name !== options.routeName) return
    if (typeof newId === 'string') {
      load(newId)
    }
  })

  return {
    loading,
    currentId,
    reload: () => {
      const id = route.query[idKey]
      if (typeof id === 'string') {
        load(id)
      }
    }
  }
}

🧪 示例用法：详情页中加载业绩数据

const detailInfo = ref({})
const detailLoading = ref(false)

const { loading, reload } = useDetailLoader({
  routeName: 'PerformanceDetail',
  fetch: async (id) => {
    const res = await getManagerPerformanceInfo({ userId: id })
    return res.data
  },
  onSuccess: (data) => {
    detailInfo.value = data || {}
    currencySymbol.value = data.exchange || '¥'
  },
  onError: () => {
    ElMessage.error('获取详情失败')
  },
  immediate: true
})

🧠 搭配列表请求也可以：

const performanceList = ref([])
const getList = async (id: string) => {
  const res = await getPerformanceOrderList({ userId: id, ...queryParams.value })
  performanceList.value = res.rows || []
}

useDetailLoader({
  routeName: 'PerformanceDetail',
  fetch: async (id) => {
    await getList(id)
    return null // 不需要 onSuccess
  },
  immediate: true
})

🧩 支持的配置项一览

参数	类型	说明
`routeName`	`string`	当前页面的路由名称
`queryKey`	`string`	监听哪个 query 字段（默认 `id`）
`immediate`	`boolean`	是否在首次进入时立即加载
`fetch`	`(id) => Promise<any>`	数据获取函数
`onSuccess`	`(data) => void`	请求成功时回调
`onError`	`(err) => void`	请求失败时回调