ViewModel Aggregation

Ein ViewModel ist das, was eine Komponente rendert. Es ist nicht das, was die API zurückgibt. Zwischen beidem liegt der Aggregations-Layer.

Was ViewModel Aggregation bedeutet

Wenn eine Komponente Daten aus mehreren Quellen braucht, aggregiert der Adapter-Layer:

// API 1: Tasks
// API 2: Users
// API 3: Projects

// ViewModel für TaskDashboard:
interface TaskDashboardViewModel {
  tasks: {
    id: string;
    title: string;
    assigneeName: string; // aus Users
    projectName: string; // aus Projects
    daysOverdue: number; // berechnet
  }[];
  totalCount: number;
  overdueCount: number;
}

Die Komponente bekommt ein fertiges ViewModel. Sie berechnet nichts. Sie mappt nichts. Sie rendert.

Wo die Aggregation passiert

In der Domänen-Schicht oder im Store:

readonly taskDashboard = computed(() => ({
  tasks: this.tasks().map(task => ({
    ...task,
    assigneeName: this.userIndex()[task.assignedUserId]?.name ?? 'Unbekannt',
    projectName: this.projectIndex()[task.projectId]?.name ?? 'Kein Projekt',
    daysOverdue: computeDaysOverdue(task.dueDate),
  })),
  totalCount: this.tasks().length,
  overdueCount: this.tasks().filter(t => t.isOverdue).length,
}));

Der Vorteil

Template-Logik (Berechnungen, Fallbacks, Formatierungen) verschwindet aus den Templates. ViewModels sind unit-testbar ohne DOM.