大家做Vue项目，肯定都遇到过loading状态管理这个头疼问题。
一个页面有三个接口要调，你怎么写loading？这样吗：
太土了。要么全屏loading闪来闪去，要么页面上一堆loading状态各管各的，丑。
今天分享一个我们项目里在用的方案，用了Pinia，大概一百行代码，但体验直接起飞。
核心思路：让组件自己上报，让store统一调度
想象一下：每个组件只管自己的loading状态，告诉全局store“我在加载”。store负责监听所有组件的状态，只要还有人在加载，就保持全屏loading。这样好处很明显：
- 组件逻辑干净，不用关心别人是不是也在加载
- 多个请求自动合并成一个loading展示
- 组件卸载自动清理，不怕内存泄漏
上代码，看看怎么实现的
先看store部分，核心其实就几十行：
再看组件里怎么用，简单得离谱：
看到没？组件完全不用管全局的loading怎么显示隐藏，只管自己的
myLoading.value = true/false就行。其他的store帮你搞定。
这方案妙在哪？
- 自动合并请求 比如页面同时发三个请求，三个组件都把loading设为true，但全屏loading只出现一次。最后一个请求结束，loading才消失。
- 组件卸载自动清理 有些同学可能担心，组件都销毁了，它的loading状态还留在store里怎么办？所以我们一定要在
onBeforeUnmount里移除注册。这是好习惯。 - 支持各种loading形式 我这里用了
toValue，是VueUse里的工具函数，它能处理ref、computed、普通值、getter函数...挺方便的。所以你的loading状态可以这样：
可扩展性强 如果想加个最小显示时间（防止loading一闪而过），或者想区分“页面loading”和“局部loading”，在store里加逻辑就行，组件完全不用改。
