大家好！最近在开发一个语言学习相关的功能，其中一个核心需求是“听句跟读”。用户需要能够全文连续播放，也能单句精听。这涉及到大量的短音频文件。初期版本实现得很直接：点击播放时才去请求音频 URL，结果就是用户每次点击都要等一下，体验很糟糕，尤其是在网络不佳的情况下。此外，播放状态（播放/暂停）、播放模式（全文/单句）等逻辑散落在组件各处，代码很快变得难以维护。 
为了解决这些问题，我最终采用了一套**“预加载队列 + Pinia集中式状态管理”**的方案，完美解决了延迟问题，并让代码结构清晰起来。今天就把这个实践过程分享给大家。 
核心思路

预加载 (Preloading): 在用户看到界面时，就在后台悄悄地把所有句子的音频文件下载好。为了避免瞬间发出大量请求造成浏览器阻塞，我们引入一个带并发控制的“预加载队列”。
状态管理 (State Management): 使用 Pinia 创建一...