Oblíbené, které zůstanou

V lekci Vypočítané hodnoty a sledování jste ukládali data do localStorage pomocí watch a při spuštění aplikace jste je zase četli. Teď, když data načítáte i v onMounted, se vyplatí ujasnit si, co se čte kdy. Aplikace v tomto cvičení nechá zákazníka označit hvězdičkou oblíbené položky a watch je už ukládá. Chybí jejich čtení, a to stejně jako tehdy, hned při vytvoření refu:

const ulozene = localStorage.getItem("oblibene");
const oblibene = ref(ulozene === null ? [] : JSON.parse(ulozene));

getItem() vrátí null, když ještě nic uložené není, a zákazník pak začne s prázdným polem. Jinak z uloženého textu udělá pole JSON.parse().

Proč je nečíst v onMounted jako nabídku? Protože localStorage odpoví hned, zatímco fetch() musí čekat na server. Není důvod čekat, a tak ho čtěte nahoře v <script setup>: když Vue poprvé ukáže stránku, hvězdičky už jsou správně.

Když se tato aplikace spustí, přicházejí její data ze tří míst a ve třech chvílích:

• co je uložené v prohlížeči: hned, když se komponenta vytváří,
• soubor nabidka.json: chvíli poté, co se komponenta připojí,
• zákazník: kdykoli klikne.

Vypočítaná hodnota z dat ze dvou míst je správná v každé chvíli. Názvy oblíbených položek vypočítané z nabidka a oblibene jsou zpočátku prázdné, přestože jejich id už aplikace zná, a objeví se, jakmile dorazí nabídka, a to bez jakéhokoli kódu navíc.

Typické chyby:

• JSON.parse() bez kontroly null: JSON.parse(null) vrátí null, a když šablona čte oblibene.includes(…), stránka skončí chybou TypeError: Cannot read properties of null (reading 'includes'). Vám to funguje, protože už máte něco uložené, ale každému novému zákazníkovi ne.
• Uložení dřív než čtení: když ref začne jako [] a watch s { immediate: true } ho hned uloží, uložené oblíbené se přepíšou prázdným polem dřív, než si je cokoli přečte.