Eine einzige Datenquelle

Die Bestellung bekommt eine eigene Komponente, Bestellliste. Bestelle aber etwas, und es steht immer noch Noch nichts bestellt da. Das liegt daran, dass Bestellliste eine eigene bestellung hat:

<script setup>
import { ref } from "vue";

const bestellung = ref([]);
</script>

App.vue fügt die Einträge ihrer bestellung hinzu, und Bestellliste zeigt ihre eigene an: ein zweites Array, dem niemand etwas hinzufügt. Zwei Kopien derselben Daten, und die Seite zeigt die falsche.

Dasselbe geht schief, wenn eine Komponente etwas für sich behält, das auch andere Teile der Seite brauchen. Würde MenueEintrag seine Bestellungen in einem eigenen const anzahl = ref(0); zählen, würde der Eintrag ×2 anzeigen, und die Bestellung und ihre Summe wüssten nichts davon.

Jedes Datum lebt also an einem einzigen Ort, seiner einzigen Datenquelle (englisch: one source of truth). Brauchen mehrere Komponenten es, lebt es in ihrem gemeinsamen Elternteil, hier App.vue. Der Elternteil übergibt es als Prop an die Komponenten, die es anzeigen, und sie bitten mit Ereignissen um Änderungen:

App.vue          hat bestellung und ändert sie in zurBestellungHinzufuegen()
├── MenueEintrag     sendet bestellen, und App.vue fügt den Eintrag hinzu
└── Bestellliste     bekommt :bestellung="bestellung" und zeigt sie an

Daten so in den Elternteil zu verschieben, heißt State nach oben verlagern (englisch: lifting state up). Nur App.vue ändert bestellung, und beide Komponenten zeigen immer dieselbe Bestellung, weil es nur eine gibt.