组合式函数统一管理页面全局加载与错误状态的核心是模块级响应式状态+封装操作接口+精准生命周期联动，通过顶层ref共享、语义化函数控制、作用域分级及异步对齐实现跨组件响应且不破坏独立性。
在组合式函数中统一管理页面全局加载与错误状态，关键不是把 loading 和 error 挂到某个全局变量上，而是让它们具备跨组件共享能力、响应式更新能力，同时不破坏单个组件的独立性。核心思路是：用模块级响应式状态 + 组合式函数封装 + 合理的触发/重置时机。
用模块作用域创建共享状态
全局加载和错误状态必须是“一份数据、多处响应”，不能每个组件都 new 一个 ref。正确做法是在单独文件中定义并导出：
- 用 ref 或 reactive 声明状态（如
const globalLoading = ref(false)、const globalError = ref(null)） - 这些 ref 必须在模块顶层声明，而非函数内部——这样所有导入该模块的组件，拿到的是同一个响应式引用
- 配合 provide/inject 或直接导出函数（如
useGlobalStatus()），让组件按需接入
封装可复用的组合式函数
不要只暴露 raw ref，而是封装成带语义的操作接口：
-
startLoading()：设
globalLoading.value = true，自动清空上次错误 -
finishLoading()：设
globalLoading.value = false -
setError(err)：赋值并可选记录时间戳或错误码，支持
null清空 - resetAll()：一键恢复初始状态，适合页面切换或表单提交后
这些方法内部操作的是模块级 ref，调用即生效，所有监听该状态的组件立刻响应。
控制作用范围：全局 vs 局部 vs 按需启用
“全局”不等于“全站强制显示”。实际中需要灵活控制作用域：
- 默认只影响当前路由层级：在
onBeforeRouteUpdate或onActivated中调用resetAll()，避免旧错误残留 - 支持局部开关：给
useGlobalStatus({ enabled: false })参数，某些轻量组件可跳过全局状态 - 错误可分级：普通请求失败走全局 error，关键操作（如支付）则用组件内 error 并弹窗，互不干扰
与异步逻辑联动，避免状态漂移
加载状态必须和真实请求生命周期对齐，否则会出现“loading 一直转”或“错误没显示”：
- 在
useAsyncData等请求 Hook 内部，自动调用startLoading()和finishLoading() - catch 错误时，优先调用
setError(err)而非仅存本地 error.ref - 用
onUnmounted清理未完成请求（配合 AbortController），防止组件卸载后还修改全局 loading - 如果多个请求并行，可用计数器（
pendingCount.ref++ / --）代替布尔值，确保最后一个请求结束才 finish
