Pinia 适合管理视频播放器的跨组件共享状态。通过创建 playerConfig Store 统一维护清晰度、音量等配置，配合 storeToRefs 响应式绑定 UI，并由组件监听变化执行实际播放逻辑，实现多端同步与状态持久化。
视频播放器的清晰度和音量属于典型的跨组件共享状态：多个页面或组件（如播放页、设置弹窗、底部控制栏）都需要读取和修改它们，但又不能靠 props 一层层传，也不能用本地 ref 管理——否则切换页面后配置就丢了。Pinia 正适合解决这类问题。
创建专用的 playerConfig Store
在 src/stores/playerConfig.js 中定义一个独立 Store，只管播放器基础配置：
- state 存默认值：清晰度（如
"720p"）、音量（如0.8）、是否静音（false） - getters 提供派生逻辑：比如
isMuted可基于volume === 0自动计算 - actions 封装修改行为：比如
setVolume(v)同时处理静音逻辑，setQuality(q)可校验是否在支持列表中
在播放组件中响应式使用
在 VideoPlay.vue 或类似组件里，用 storeToRefs 解构出响应式字段，直接绑定到 UI：
- 音量滑块：
<input type="range" v-model="volume" min="0" max="1" step="0.01"> - 清晰度下拉：
<select v-model="quality"><option>480p</option><option>720p</option></select> - 点击静音按钮时调用
store.toggleMute()，内部自动设 volume=0 或恢复上次音量
让设置面板与播放器实时同步
设置弹窗（如 SettingsModal.vue）同样导入同一个 usePlayerConfig()，它读写的是同一份响应式 state。不需要额外通信或事件总线——只要 store 更新，所有引用它的组件立刻响应。
- 用户在设置页调高音量，播放页的音量条自动跳转
- 播放页切清晰度，设置页的选中项同步更新
- 组件卸载再进入，配置依然保留（可配合 pinia-plugin-persistedstate 持久化到 localStorage）
避免常见陷阱
不要把播放器实例（如 video 元素、hls 实例）放进 Pinia state——它不是用来存 DOM 或第三方对象的。Pinia 只管“配置数据”，播放逻辑仍由组件或 composable 处理。
- 清晰度变更后，由播放组件监听
quality变化，再调用hls.currentLevel = levelIndex等实际 API - 音量变化后，组件同步调用
videoEl.volume = store.volume - 这样职责分明：Pinia 做状态中枢，组件做行为执行者
