应将沉浸状态建模为pinia store中的明确字段（如isimmersive），配套原子化action控制全屏切换，监听fullscreenchange自动同步，并结合持久化插件保存用户意图，ui响应store而非dom事件。
全屏切换时维持全局沉浸状态，关键不是“记住全屏这件事”，而是把“是否处于沉浸模式”这个语义明确的状态，作为可响应、可持久、可跨组件同步的业务状态来管理。Pinia 正是为此类场景设计的——它让“沉浸态”不再依赖 DOM 或组件生命周期，而成为应用级的事实。
把沉浸状态建模为 Store 中的明确字段
不要在组件里用 ref 或 useState 临时存全屏开关；应在 Pinia Store 中定义一个语义清晰的 state 字段，例如 isImmersive 或 inFullscreenMode，并配套提供切换动作。
- 状态定义简洁直接：
state: () => ({ isImmersive: false }) - 提供原子化 action：
enterImmersive()和exitImmersive()，内部调用document.documentElement.requestFullscreen()或document.exitFullscreen()，并在成功后同步更新isImmersive - 监听原生事件（如
fullscreenchange）自动同步状态，避免手动调用遗漏导致 Store 与真实 DOM 状态不一致
绑定全屏行为到状态变更，而非反向操作
组件不应主动调用 requestFullscreen() 后再手动改 Store；而应只调用 Store 的 enterImmersive()，由该 action 统一处理 DOM 操作 + 状态更新 + 错误兜底。这样能保证：
- 状态变更必有来源（只来自 Store 的 action），调试时可在 DevTools 中完整追溯
- 失败时可统一提示或降级（例如捕获
TypeError: Document not allowed to be in fullscreen） - 多个组件触发同一行为（如工具栏按钮、快捷键、双击区域）都走同一入口，逻辑收敛
刷新后仍保持沉浸状态需配合持久化插件
浏览器全屏状态本身无法跨页面保留（刷新即退出），但“用户意图进入沉浸模式”这个业务意图可以保留。启用 pinia-plugin-persistedstate 并配置仅持久化 isImmersive 字段：
- 插件会自动将
isImmersive: true写入localStorage - 页面加载后，Store 初始化时读取该值，并在
onMounted或nextTick中尝试重新进入全屏（注意：需用户交互触发，因此建议搭配一个轻量引导 UI，如淡入提示“点击继续沉浸模式”） - 避免无条件自动全屏——现代浏览器禁止静默全屏，否则会静默失败且不报错
与路由、布局组件协同控制视觉表现
沉浸状态影响的不只是全屏 API，还包括导航栏隐藏、背景变暗、滚动锁定等。这些 UI 变更应响应 Store 中的 isImmersive，而非监听 fullscreenchange 事件：
- 根布局组件（如
App.vue或Layout.vue）通过computed订阅store.isImmersive，动态添加 class（如immersive-mode）或控制子组件显隐 - 路由守卫中可检查
isImmersive，在跳转前主动退出（例如离开编辑页时自动退出沉浸，防止黑屏卡死） - KeepAlive 缓存的页面若含沉浸逻辑，其
onActivated可读取当前isImmersive并恢复对应 UI，无需重复判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
