响应式与数据

BUI 的响应式以 UIStore 为核心。它类似 Vue 的 reactive + store：

• 同步数据：服务端下发的 sync:* 只读。
• 本地数据：客户端脚本自行创建的 store。
• 查询数据：useQuery / usePrefetch 管理异步结果与缓存。

1. internalSyncStore（只读）

系统在脚本上下文中注入：

const hp = internalSyncStore.get("sync:hp")

注意：同步 store 只读，请不要在客户端写入 sync:*。

2. 本地 Store

创建/获取

const store = defineStore("player", { hp: 100, mp: 50 })
// 或
const store = useStore("player")

基本操作

store.set("hp", 80)
const hp = store.get("hp")

监听与计算属性

store.watch("hp", (oldVal, newVal) => {
  console.log(oldVal, newVal)
})

computed("hpPercent", ["hp"], () => {
  const hp = store.get("hp")
  return hp / 100
})

3. 全局 watch / computed

不传 store 时默认使用当前 UI 的 Store：

watch("sync:level", (oldV, newV) => { ... })

4. 查询系统（Query）

const result = useQuery("shopItems", "shop:load", { page: 1 })
if (result.isLoading) { ... }
if (result.error) { ... }

支持：

• useQuery / usePrefetch
• invalidateQueries / setQueryData / getQueryData

5. localStorage（客户端持久化）

localStorage.setItem("theme", "dark")
const theme = localStorage.getItem("theme")

6. 生命周期

• onMounted：组件挂载
• onUnmounted：组件卸载
• onActivated / onDeactivated：KeepAlive 场景

7. 常见误区

• internalSyncStore 只读；可读不可写。
• UI 内的 defineStore 是客户端本地 Store，不会自动同步到服务端。
• 查询系统返回的是“状态对象”，不是直接结果。