模块化看板需按业务域划分状态模块，各域封装独立状态逻辑并暴露语义化方法；视图组件只接收数据快照与渲染控制，不感知状态来源；渲染逻辑外置为纯函数支持复用；异步流与副作用由组合式函数集中管控。
在复杂的数据看板项目中，模块化不是简单地按文件夹切分，而是围绕“谁持有状态、谁触发变更、谁负责呈现”建立清晰边界。关键在于让状态管理与视图渲染解耦，同时保持协作高效、调试可控、扩展灵活。
按业务域划分状态模块，而非技术层
看板通常包含多个子区域：实时指标卡片、趋势折线图、TOP10排行榜、异常告警列表。每个区域应视为独立业务域，各自封装状态逻辑：
- 每个域建一个
stores/dashboard-metrics.js（用 Pinia store 或 Remesh Domain），只暴露load()、refresh()等语义化方法，不导出原始 state 对象 - 状态内部使用不可变更新（如 immer 或结构化 clone），避免直接修改响应式引用引发的竞态或跳帧
- 跨域依赖通过显式调用（如
metricsStore.load()）或事件总线通信，禁止import { useAlertStore } from '@/stores/alert'在 metrics 组件内直接读写
视图组件只接收数据快照，不感知状态来源
看板页面（如 DashboardView.vue）应是纯粹的“数据消费者”：
- 通过
setup()或computed接收各 store 的派生状态（如const chartData = computed(() => metricsStore.series)），而非直接调用store.getData() - 所有图表组件（
LineChart、RankList）只接受props，不 import 任何 store；它们不知道数据来自 API、WebSocket 还是本地缓存 - 加载状态、错误提示等 UI 行为统一由父组件控制（如传入
:loading="metricsStore.loading"），不分散到子组件内部判断
渲染逻辑外置，支持多形态复用
看板常需同一份指标数据以不同形式展示（表格/卡片/弹窗摘要），此时应抽离渲染函数：
- 新建
renderers/metric-card.js，导出纯函数renderMetricCard(h, { value, label, trend })，返回 VNode - 在 Vue 组件中通过
render: (h) => renderMetricCard(h, props)调用，或在 JSX 中直接使用 - 搭配
defineComponent({ name: 'MetricCard', render: renderMetricCard })封装成轻量组件，避免模板冗余和重复逻辑
异步流与副作用集中管控
看板高频依赖定时刷新、WebSocket 推送、用户筛选联动，这些副作用不能散落在各组件中：
- 用
composables/useRealtimeMetrics()封装连接、重连、消息路由逻辑，返回{ data, status, refresh }响应式对象 - 组件内仅调用
const { data } = useRealtimeMetrics('orders')，不关心底层是 fetch 还是 socket - 全局错误捕获统一在入口级
errorHandler中处理网络失败、解析异常，并触发 toast 提示，不重复写在每个图表组件里
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
