pinia 可通过监听 navigator.online 实现响应式网络状态管理，提供 isonline 状态、checknow 方法及防抖提示，并支持心跳检测增强判断。

Pinia State 本身不直接感知网络状态，但可以结合浏览器原生的 navigator.onLine 和事件监听（online/offline）来统一管理在线/离线标识，并在多个组件间响应式共享。

定义一个 network 状态 store

创建一个专门管理网络状态的 Pinia store，暴露 isOnline 响应式状态和手动同步方法：

• 初始值取自 navigator.onLine
• 监听 window.addEventListener('online') 和 'offline' 实时更新
• 提供 checkNow() 方法用于主动轮询或重试时校验（例如页面恢复可见时）

避免重复监听和内存泄漏

在 store 的 setup() 或 onMounted（若在组件中初始化）中绑定事件，同时确保卸载逻辑清晰：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

• 使用 onUnmounted（组合式 API）或 store.$onAction 配合清理函数
• 更稳妥的做法：在 store 内部用 onBeforeUnmount（需配合插件或手动注册），或改用 effectScope 管理副作用生命周期
• 推荐在 store 的 setup() 中用 onActivated / onDeactivated 不适用，应直接用 window 事件 + 显式移除

在组件中安全使用和响应

组件通过 useNetworkStore() 获取状态，配合 v-if、watch 或计算属性触发 UI 反馈：

• 显示「离线提示」时，建议加防抖（如延迟 500ms 显示），避免短暂抖动误判
• 提交请求前检查 isOnline.value === false，可提前拦截并提示“当前无网络”
• 离线时自动缓存 mutation（如待同步的表单数据），等恢复后由 store 触发重发逻辑

补充：服务端不可靠时的增强判断

navigator.onLine 仅检测设备是否连接到网络，不保证能访问服务器。如需更高精度：

• 定期发送轻量心跳请求（如 /health），将结果写入 store 的 isReachable
• 把 isOnline && isReachable 合成 isFullyOnline 计算属性供业务使用
• 心跳失败连续 2 次再标记为不可达，避免单次超时误判