Pinia 的 state 仅安全、响应式地持有地理位置坐标，实时更新由 WebSocket、GPS 或轮询等外部机制触发；需结构化定义字段并用 actions 封装校验与批量更新。
Pinia 的 state 本身不负责“管理”地理位置坐标的实时性，它只负责安全、响应式地持有和暴露这些坐标数据。真正的实时状态更新来自外部——比如 WebSocket 接收的位置消息、GPS 设备回调、或定时轮询接口。Pinia 的作用是让这些坐标变化能立刻被 Vue 组件感知并自动更新 UI。
用 state 安全存坐标字段
地理位置数据通常包含 x/y/z 坐标、朝向角、时间戳等，建议在 store 中结构化定义，避免后期字段混乱：
- 使用箭头函数返回对象，确保 SSR 安全
- 字段名与后端协议严格对齐（如
player_id、x_coord、y_coord、z_coord、heading_angle、timestamp） - 初始值设为
null或默认占位值，避免组件渲染时报错
state: () => ({
player_id: '',
x_coord: 0,
y_coord: 0,
z_coord: 0,
heading_angle: 0,
health_status: 'alive',
weapon_state: 'idle',
team_id: 0,
timestamp: 0
})
用 actions 更新坐标（推荐异步+校验）
不要直接在组件里写 store.x_coord = newx，而是封装成 action，便于统一处理逻辑：
- 接收完整坐标包（如从 WebSocket 消息中解析出的对象）
- 做基础校验：是否为有效数字、时间戳是否新于当前、是否属于本玩家
- 调用
this.$patch()批量更新，性能更好且触发一次响应式更新
actions: {
updatePosition(data) {
if (data.timestamp <= this.timestamp) return
this.$patch({
x_coord: Number(data.x_coord),
y_coord: Number(data.y_coord),
z_coord: Number(data.z_coord),
heading_angle: Number(data.heading_angle),
timestamp: data.timestamp
})
}
}
配合 WebSocket 实现实时驱动
Pinia 不管连接，但可以作为 WebSocket 回调的“终点”。典型流程是：
- 在 store 的
onMounted或初始化阶段，建立 WebSocket 连接（建议用独立 service 模块） - 监听
message事件，解析二进制帧或 JSON，提取坐标字段 - 调用
updatePosition(data)把数据喂给 state - 利用
onUnmounted或 store 的onBeforeUnmount清理连接，防内存泄漏
需要多玩家？用数组或 Map 管理多个坐标
单个 state 对象适合当前玩家；若需渲染百人同屏，state 应设计为可扩展结构：
- 用
players: new Map()存储各player_id → 坐标对象，支持 O(1) 查找与响应式更新 - 或用数组
players: []+findIndex，配合$patch局部更新 - Leaflet 地图组件中，通过
watchEffect监听players变化，动态刷新标记位置
