Opakování

Opakování z minule

• události — způsob komunikace mezi komponentami
• zavolání — $emit(name, data)
• zachycení — @name="fnc()"

Jaký problém má tento způsob předávání dat?

Pinia

Pinia

• knihovna na uchovávání dat
• k datům mají přístup všechny komponenty
• každá komponenta může data změnit očekávaným způsobem

(De)centralizované data

• jaký je mezi nimi rozdíl?
• centralizované — na jednom místě, spravuje nějaký nadřazený prvek
• decentralizované — každá komponenta si své data spravuje sama

Pinia

• následník Vuex
• používáme zejména kompozici, ostatní způsoby jsou možné
• lze si představit jak globální obchod či speciální komponentu
• ta má stav, uložená data
• akce se volají a provádějí pokročilé úpravy dat
• gettery vrací data nějak upravená

Zapnutí Pinia

• nutné připojit k aplikaci app.use(createPinia())
• stores definujeme většinou v /stores/

Ukázka store

Přístup

• store musíme načíst v dané komponentě
• celá kompozice či metoda setup
• na dané proměnné máme k dispozici stav a dané akce

Použití store

Vue.js devtools

• (minimálně v Google Chrome)
• vývojářské nástroje
• dovoluje sledovat Pinia stav, události, komponenty a další

Instalace balíčků

Instalace balíčků

• dvě možnosti:
• přidání při vytváření projektu
• přidání v již existujícím projektu

Při vytváření

• při vytváření projektu — npm create vite@latest
• vyberem vue-create
• vybereme balíček, který chceme přidat
• balíček se nainstaluje a vytvoří se potřebné soubory

Již existující

• většinou nemáme automaticky možnost
• instalujeme pomocí npm a vlastně konfigurujeme