推荐用计数器管理全局 loading：state 中定义 count，默认 0；showloading() 执行 count++ 并设 isloading = count > 0；hideloading() 执行 count--，仅当 count === 0 时设 isloading = false，确保并发请求下 loading 等待最后一个结束才隐藏。
用状态管理实现 Vue 应用的全局 Loading 控制，核心是把 loading 状态从组件中抽离出来，统一由 store 管理，并通过响应式机制自动驱动 UI 更新。不需要每个页面都声明 isLoading，也不用手动在每个请求前后开关——一次定义，处处生效。
Pinia 中用计数器防误关
布尔值 isLoading = true/false 容易出问题：比如两个请求一前一后发出，第一个快速返回就把 loading 关了，第二个还在跑，UI 就提前恢复。推荐用计数器：
- state 里定义 count: number，默认为 0
- showLoading() 做 count++，并设置 isLoading = count > 0
- hideLoading() 做 count--，仅当 count === 0 时才设 isLoading = false
- 这样即使并发多个请求，loading 也会等到最后一个结束才隐藏
按模块或接口粒度控制
全局遮罩有时太粗暴。比如只希望“提交表单”时按钮禁用、“加载列表”时表格显示骨架屏，其他操作不受影响。可以这样设计：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- state 中用对象管理：loading: { submit: false, list: false, detail: false }
- action 内部显式控制对应字段：this.loading.submit = true → try → finally → this.loading.submit = false
- 模板中直接绑定：v-loading="loading.submit" 或 :disabled="loading.submit"
- 再加个计算属性 isAnyLoading，用于控制全屏遮罩层是否显示
用 $onAction 自动拦截所有异步 action
避免在每个 action 里重复写 try/finally。Pinia 的 $onAction 可以统一注入 loading 逻辑：
- 在 store 创建后，调用 this.$onAction((ctx) => { ... })
- 在钩子中判断 action 名称是否含 'fetch'、'submit' 等关键词，决定是否触发 loading
- 利用 after 和 onError 钩子确保无论成功失败都重置状态
- 配合 TypeScript 类型守卫，还能对特定参数结构的 action 做精准控制
与 UI 组件解耦，支持任意框架风格
loading 状态本身不依赖 UI 库，但展示方式可灵活适配：
- 状态只管“是否在加载”，不管“怎么显示”
- Element Plus 项目用 v-loading 指令；Ant Design Vue 用 a-spin；自研组件就用 v-if + 自定义动画
- 可在 App.vue 根节点监听 isAnyLoading，挂载全屏遮罩；也可在按钮上监听具体字段，做局部反馈
- 甚至可结合 CSS @layer 或 scoped style，让 loading 动画样式完全独立于业务组件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
