Vue: Vuex

58. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování

Co dělá direktiva v-bind?
Co je to princip minimálního překvapení?
Jak vypadá životní cyklus Vue instance?
Co je to konstruktor?
Jak se zneguje selektor?

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?

Řešení úkolu

https://ssps.cajthaml.eu/3-mvop-wbf/work/57-logovani

Lze řešit problém předávání dat mezi komponentami jednodušeji?

Vuex

  • 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

Jak se v komponentě ukládají data?

Vuex

  • lze si představit jak globální obchod či speciální komponentu
  • ta má stav, uložená data
  • stav měníme pomocí mutací, např. odebráním položek
  • mutace upravují data a nedělají komplikovanější akce
  • akce volají mutace a upravují data s nějakou logickou vrstvou

Klíčové pojmy

  • state — stav (uložené data)
  • mutations — mutace (změna dat uvnitř stavu)
  • actions — akce (akce, které mohou komponenty spouštět)
  • commit — vyvolání mutace
  • dispatch — vyvolání akce

Ukázka store

Přístup

  • celý store je k dispozici v this.$store
  • data čteme v computed proměnnných pomocí this.$store.state
  • akce voláme pomocí this.$store.dispatch("name", data)

Životní cyklus

Vue.js devtools

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

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 — vue create projectName
  • vybereme balíček, který chceme přidat
  • balíček se nainstaluje a vytvoří se potřebné soubory

Již existující

  • pomocí příkazu pomocí @vue/cli
  • vue add jmenoBalicku

Nainstalujeme si Vuex do projektu úkolu!

Co se stalo?

  • do package.json a node_modules se přidal balíček
  • vytvořila se složka src/store
  • v souboru main.js se zaktivoval balíček

Co je v souboru store/index.js?

Předěláme úkol Logování do Vuexu.

Přeneseme data komponent do state.

Vytvoříme mutace state.

Vytvoříme akce na volání mutací.

Čtení dat uvnitř komponent.

Čteme pomocí this.$store.

Zavoláme akce.

Mutace ve Vuex musí být synchronní. Akce nikoliv.

Co máme ve Vuex ukládat?

Co nemáme ve Vuex ukládat?

Jak se liší akce a mutace?

Uloží se data, když se znova přenačte stránka?

Lze řešit problém předávání dat mezi komponentami jednodušeji?

Příště vícestránkové aplikace!

Lepší Azla

Práce

https://ssps.cajthaml.eu/3-mvop-wbf/work/59-lepsi-azla

Klikačka 2

Práce

https://ssps.cajthaml.eu/3-mvop-wbf/work/60-klikacka-2

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/