通过customRef封装的useLoading hooks函数
基于 customRef 的并发 loading 计数 hook, 避免并发请求导致loading状态其他结束
loading
ts
import { customRef } from 'vue'
/**
* useLoading - 一个基于 customRef 的并发 loading 计数 hook
*/
export function useLoading() {
let loadingCount = 0
const isLoading = customRef<boolean>((track, trigger) => ({
get() {
track()
return loadingCount > 0
},
set(value: boolean) {
if (value) {
loadingCount++
} else {
loadingCount = Math.max(0, loadingCount - 1)
}
trigger()
}
}))
/**
* setLoading - 控制 loading 状态
* @param {boolean} value true 增加 loading 计数,传 false 减少 loading 计数
*/
function setLoading(value: boolean): void {
isLoading.value = value
}
/**
* resetLoading - 重置 loadingCount 为 0,并触发一次更新
*/
function resetLoading(): void {
loadingCount = 0
// 触发一次更新
isLoading.value = false
}
return { isLoading, setLoading, resetLoading }
}