小四 mitt 事件总线

这个技能解决什么问题

在单页 CRM 里，表单保存成功后要让列表安静地刷新一次，关闭全局抽屉时其他模块也需要知情。常见做法是 props 逐层回调，或者直接引入完整状态库：前者写起来啰嗦、改起来容易漏，后者为两个信号背上过重的依赖。这个技能用 mitt（约 200B 的函数式 EventEmitter、零依赖）在页面内搭一条轻量总线，并用 TypeScript 泛型把事件表约束清楚，让「谁发、谁收」变成显式的接口约定。

它是怎么工作的

核心是一条 crmBus 总线：

• 事件名统一写成 域:动作 字符串，例如 customer:saved、drawer:close，避免魔法字符串散落在各处；
• 保存成功处调用 emitCustomerSaved，列表页通过 bindListRefresh 绑定静默刷新逻辑；
• 组件在 onMounted 中订阅，onBeforeUnmount 必须调用返回的 off，防止重复刷新与监听泄漏；
• 事件类型表用 TypeScript 泛型约束，emit 与 on 的 payload 都接受类型检查；
• payload 保持可序列化且尽量小，不要塞进整棵 Vue 组件实例；
• 调试时可以用 on('*') 观察事件流量，但生产环境不要长期挂通配监听打印日志，以免泄漏内部状态。

实现要点处的注释标注 小四原创，表明这是作者在自己项目里沉淀的做法。

适用边界

• 这条总线只覆盖当前页面内部；跨标签页同步请使用已上架的「多标签页同步」技能，本包不跨窗口。
• 不要用总线传递巨大的业务对象来替代状态管理，那会把数据一致性问题变成隐式耦合。
• 忘记调用 off 是最常见的坑。自测时检查两点：保存后列表确实刷新；离开页面后没有残留监听。