Jediný zdroj pravdy

Objednávka dostane vlastní komponentu, Objednavka. Když ale něco objednáte, pořád ukazuje Zatím nic objednáno. Objednavka má totiž vlastní pole objednavka:

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

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

App.vue přidává položky do svého pole objednavka a komponenta Objednavka ukazuje to své: druhé pole, do kterého nikdo nic nepřidává. Dvě kopie stejných dat a stránka ukazuje tu špatnou. (Komponenta Objednavka s velkým O a pole objednavka s malým jsou v JavaScriptu dvě různá jména.)

Stejně se to pokazí, když si komponenta nechá pro sebe něco, co potřebují i jiné části stránky. Kdyby PolozkaMenu počítala své objednávky ve vlastním const pocet = ref(0);, položka by ukazovala ×2 a objednávka ani celková cena by o tom nevěděly.

Každý údaj proto žije na jednom místě, které je jeho jediným zdrojem pravdy. Když ho potřebuje víc komponent, žije v jejich společném rodiči, tady v App.vue. Rodič ho předá jako props komponentám, které ho ukazují, a ty ho žádají o změny událostmi:

App.vue          má objednavka a mění ji v pridejDoObjednavky()
├── PolozkaMenu  vyšle objednat a App.vue položku přidá
└── Objednavka   dostane :objednavka="objednavka" a ukáže ji

Tomuhle postupu se říká přesun stavu nahoru (anglicky lifting state up): data se přesunou z komponent do jejich rodiče. objednavka mění jen App.vue a obě komponenty ukazují vždy stejnou objednávku, protože je jen jedna.