Vue.js: Przepływ informacji w aplikacji
Techniki Zaawansowane
5 godz. 11 min · Vue.js · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Zaawansowane techniki pracy z Vue.js
- Praca z wieloplikowymi komponentami
- Zarzadzanie stanem aplikacji z VueX
- Routing z uzyciem vue-router
- Praca z danymi z uzyciem axios
- Techniki walidacji formularzy
- Praktyczne projekty
- Masa przydatnych wskazówek
Kurs, który masz przed sobą, to kontynuacja wydanego wcześniej kursu Vue.js od Podstaw. W pierwszym kursie omówione zostały najważniejsze koncepcje pracy z Vue, a w tym materiale poruszamy już bardziej zaawansowane tematy. Przede wszystkim skupimy się na pracy z użyciem nowoczesnego workflow, co da nam niezwykłą swobodę tworzenia aplikacji internetowych. Jeśli zatem znasz już podstawy pracy z tym frameworkiem i chcesz wskoczyć na kolejny poziom wtajemniczenia, ten kurs jest zdecydowanie dla Ciebie. A co znajdziesz w materiale?
Zaawansowane koncepcje
Na początku zobaczysz, jak szybko tworzyć pliki startowe do nowej aplikacji z użyciem narzędzia vue-cli. Omówimy możliwość dzielenia kodu na wiele plików, tworzenia szablonów, a także wykorzystywania bezpośrednio funkcji renderującej, do której zamieniane są na etapie builda wszystkie szablony.Zobaczysz również czym są i jak pracować z komponentami funkcyjnymi i tzw. mixinami, które pozwolą reużywać raz napisany fragment kodu.
Zarządzanie stanem aplikacji z VueX
Przepływ informacji to bardzo ważny temat w każdej aplikacji internetowej. Vue oferuje kilka sposobów na to, aby komponenty mogły się ze sobą komunikować. Ich omówienie zaczniemy od najprostszych technik, które świetnie sprawdzają się w wielu przypadkach. Następnie rozszerzymy możliwości instancji Vue w ten sposób, aby wszystkie komponenty miały dostęp do scentralizowanego miejsca, gdzie przechowywany będzie stan aplikacji.Tam jednak, gdzie aplikacja wymaga zarządzania większą ilością danych jednocześnie, powyższe techniki mogą być niewystarczające. Z tego powodu, podobnie jak w innych frameworkach, Vue posiada oficjalny wzorzec oraz bibliotekę do zarządzania stanem aplikacji. Rozwiązanie to nazywa się VueX i w kursie zostanie ono dokładnie omówione. Zobaczysz zatem jak skonfigurować tzw. store, jak przechowywać w nim dane, jak je wyświetlać w widokach, aktualizować za pomocą tzw. mutacji czy pracować z nimi wykorzystując akcje. Przekonasz się, że początkowa większa ilość pracy, aby wszystko skonfigurować, w pewnym momencie zaczyna się opłacać.
Routing w aplikacji
Tworzenie nowoczesnych aplikacji typu SPA (Single Page Application) nie może się obejść bez zmian widoków. Dobrą praktyką jest, aby wraz z takimi zmianami, aktualizowany był również pasek adresu. Wykonanie takiego zadania umożliwiają nam tzw. routery. Vue posiada oficjalny dodatek o nazwie vue-router, który w tym kursie dokładnie omówimy.Zobaczysz jak dołączyć router do swojego projektu, a także jak konfigurować ścieżki. Poruszymy tematy takie jak generowanie odnośników, dynamiczne parametry, tworzenie zagnieżdżonych ścieżek czy nawigacja z poziomu kodu JavaScript. Dowiesz się również, jak tworzyć tzw. guardy, które umożliwią lub zablokują możliwość wyświetlania wybranego widoku, np. w zależności od tego czy użytkownik jest aktualnie zalogowany.
Praca z danymi z serwera
Trzecim, po zarządzaniu stanem aplikacji i wykorzystaniu routingu, komponentem, który niezbędny jest do tworzenia aplikacji napędzanych danymi, jest możliwość wysyłania zapytań HTTP.Tę czynność umożliwi nam bardzo popularna, acz niezależna od Vue biblioteka axios. Zobaczysz jak za jej pomocą pobierać i wysyłać dane. Aby jednak jak najwygodniej pracować z tym rozwiązaniem, połączymy axios z Vue, udostępniając tak naprawdę jej metody wewnątrz każdego komponentu.
Walidacja formularzy
W jednym z rozdziałów kursu podejmiemy temat walidacji formularzy. Zobaczysz jak z pomocą popularnego pluginu dla Vue, robić to w bardzo prosty sposób.Omówimy różne funkcje walidujące, które umożliwią sprawdzenie poprawności pól tekstowych, radio czy checkboxów. Zobaczysz jak w łatwy sposób wyświetlać komunikaty o błędach i warunkowo zmieniać wygląd pól. Nie zabraknie również informacji o asynchronicznej walidacji, która pozwoli nam na żywo sprawdzać czy wpisany adres email jest dostępny czy też nie.
Praktyczne projekty
Kurs ten oczywiście to nie tylko niezbędna teoria, ale także praktyczne przykłady. Aby jak najlepiej poznać omawiane techniki, wykorzystamy je do stworzenia ciekawych aplikacji.Pierwszą z nich będzie konfigurator produktu, który umożliwi użytkownikowi wybór podzespołów zamawianego komputera. Każdy taki wybór będzie wpływał na końcową cenę, która będzie na bieżąco aktualizowana. Po wybraniu wszystkich opcji, dane prześlemy na serwer. To projekt który pokaże Ci jak przechowywać dane z użyciem VueX, a także jak na ich podstawie wyświetlić widok i napisać logikę.Innym projektem, który wykonamy, będzie Quiz. To aplikacja, gdzie użytkownik odpowiadał będzie na serię pytań pobranych z serwera, a do wyboru będą 3 odpowiedzi. Po przejściu przez wszystkie pytania, wyślemy do serwera zapytanie, a ten w zamian zwróci nam listę poprawnych odpowiedzi. Dzięki temu pokażemy użytkownikowi, gdzie miał rację, a gdzie popełnił błąd. Aplikacja ta wykorzystywać będzie wszystkie najważniejsze techniki, tj. VueX, routing, a także Ajax.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które czują się już swobodnie w pracy z frameworkiem Vue. Jeśli zatem masz już solidną wiedzę podstawową lub przerobiłeś kurs Vue.js od Podstaw, to zdecydowanie jesteś gotów na poszerzenie swoich umiejętnośći w pracy z tym frameworkiem. Co ważne, doświadczenie w pracy z innymi frameworkami JavaScript nie jest tutaj wymagane, a jedyne co będzie bardzo pomocne, to znajomość nowej składni EcmaScript 6.
Vue.js 2.x.x
W tym rozdziale omówimy bardzo ważny temat, a mianowicie przepływ informacji wewnątrz aplikacji korzystających
z Framework'a Vue.
I będę chciał w tej lekcji pokazać coś prostego, otóż komponent, który widzisz teraz na ekranie stworzyliśmy
w kursie Vue.js od podstaw.
Jeżeli miałeś okazję ten kurs widzieć, to wiesz jak on działa.
Jeżeli nie, to i tak wierzę, że jesteś na takim etapie, że bez problemu zrozumiesz, co tutaj się znajduje.
Ale ja ci pokrótce pokażę.
Mamy główną aplikację, która generuje nam taki oto formularz, a w tym formularzu generuje listę select,
która będzie miała wartości option od 1 do 10, czyli wygląda ta lista w ten sposób.
I teraz kiedy coś się zmieni w tej liście, to przypisałem do v-model, initValue.
To oznacza, że wewnątrz tej aplikacji jej stan, czyli initial value ma się również zmienić
i teraz mamy komponent counter, który tak naprawdę będzie nam wyświetlał takie obliczenia. On się znajduje
tutaj i chciałbym jemu przekazywać tę wartość wybraną z tej listy.
Jak możemy to zrobić.
Otóż przekazywanie wartości w dół.
Tak to się określa, robimy za pomocą props, czyli w tym counterze
zdecydowałem, że jedną z props jakie on on przyjmuje to jest initValue będzie przypisane do jego
wewnętrznego stanu, czyli do counter tutaj.
Więc spróbujmy to przekazać w tym miejscu, musimy to zbindować, w ten sposób, żeby to było dynamiczne
i napiszemy initValue. Nie musimy tutaj pisać, tak jak wewnątrz przeglądarki z pauzą, bo te templatki są prekomplikowane,
więc dosłownie można tak to wpisać i co tam chce przekazać, initValue.
Ta nazwa z tą nie ma nic wspólnego.
Natomiast tak nazwałem prop w komponencie counter.
Tutaj również, tutaj muszę nazwać tekst tak samo.
Natomiast to oznacza, że do tego counter'a będziemy przekazywać tę wartość, initValue
i w zależności od tego jaka ona tutaj jest, taka zostanie przekazana do środka, więc odświeżmy, zobaczmy. Widzimy
10, natomiast w momencie, w którym chciałbym zmienić coś, żeby to również tutaj mogło być zmienione, to
musiałem na tym counterze zrobić watcher.
Czyli kiedy jego property się zmieni, to wtedy chcę counter również zmienić.
Dzieje się tak dlatego, że później z tego wewnętrznego counter'a będziemy korzystać będę go zmieniał, nie
chciałem zmieniać initValue, bo ona jest mi potrzebna na końcu, żeby zresetować ten counter, więc w ten sposób
musiałem zrobić watch'a, że jeżeli to się zmieni to counter również zmienimy,
czyli kiedy ona się zmienia,
działa to bez problemu.
No i teraz jeśli ustalimy np. wartość 4, kliknę na obliczanie, jak widzisz oblicza nam się to, i resetujemy
na wartość pierwotną czyli 4.
Wszystko działa jak należy.
Natomiast teraz chciałbym się skomunikować w górę, właśnie z tego komponentu dziecka, powiedzieć coś rodzicowi,
bo zauważ, że kiedy odliczamy to tutaj mam zablokowany przycisk.
Dzieje się tak dlatego, że mam coś takiego jak inProgress.
W momencie kiedy zaczynamy odliczanie, czyli funkcja start się wykona to ustawiam inProgress na true.
I kiedy mamy ten inProgress ustawiony na true, to ten przycisk jest po prostu zablokowany.
Chciałbym również blokować tę listę.
Czyli chciałbym ten inProgress do góry wypchnąć można powiedzieć, dać znać temu komponentowi głównemu,
że tutaj coś się dzieje i to możemy zrobić za pomocą zdarzeń.
Czyli musiałbym przejść do głównej aplikacji i w miejscu gdzie zamontowałem komponent, mogę przypisać
zdarzenie i nazwiemy to zdarzenie np. progress i tutaj przypisujemy funkcję, która ma się wykonać kiedy
ten komponent wyemituje zdarzenie progress. Funkcję, którą podamy,
to jest funkcja, która ma się znajdować w tym komponencie.
Więc będę chciał tę funkcję nazwać toggleState i musimy ją oczywiście utworzyć tutaj w methods.
toggleState, jest to funkcja, która otrzyma nową wartość i będę chciał sobie tutaj również utworzyć lokalnie
inProgress, czyli muszę to zdublować ustawiamy na false i będę chciał to zmieniać, czyli this.inProgress,
będę chciał ustawić na wartość przekazaną z tego komponentu. Udało się, więc teraz ten komponent musi emitować
zdarzenie progress.
Jak to zrobimy?
Otóż w miejscu gdzie robimy sobie start, zrobimy sobie this.emit.
Jest taka funkcja, emitujemy zdarzenie o nazwie progress i chcę mu przekazać this.inProgress.
To co ustawiłem tutaj na true, przekazuje. Natomiast w momencie kiedy zakończymy odliczanie tutaj, będę chciał wyemitować
to z wartością false.
Mam nadzieję że tutaj nadążasz za mną, czyli zmienimy to np. na trzy. Odliczamy, OK.
Nie ma żadnych błędów, więc to powinno być emitowane. Natomiast zablokujmy sobie tę listę jeszcze kiedy
inProgress, który mamy w tym miejscu ma wartość true.
Więc tutaj sobie dodamy disabled, kiedy mamy inProgress.
Ważne jest to, że tutaj inProgress nie ma nic wspólnego z tym, który jest tutaj wewnątrz. Mogliśmy to
nazwać inaczej, ale ważne, że komponent można powiedzieć, że wyemitował zdarzenia i u góry wiemy, że coś
takiego miało miejsce i możemy sobie coś przestawić.
Sprawdźmy.
Lista jest blokowana i teraz jest odblokowywana.
Czyli tak naprawdę tak wygląda komunikacja.
Więc jeżeli zmieni się jakiś prop, który jest tutaj u góry w jakimkolwiek komponencie wyżej np. initValue,
to zauważ, że jest on propagowany w dół.
Natomiast jeżeli u dołu coś zmienimy, to musimy tak naprawdę wyemitować zderzenie z nową wartością, a
na innym komponencie na to zdarzenie nasłuchiwać.
I nie jest to problemem,
jeżeli mamy niewiele tych komponentów. Natomiast w momencie kiedy będziemy mieli wiele komponentów obok
siebie i będziemy chcieli, żeby one wiedziały, że jakieś dane się zmieniły, to będziemy musieli zastosować
inne rozwiązania.
Natomiast zanim do tego dojdziemy, to chcę Ci pokazać jeszcze inne podejście, konkretnie do tego co zrobiliśmy
tutaj.
Jak można to nieco ułatwić i tak krok po kroku, przejdziemy do tego co tak naprawdę ułatwi nam konkretnie
zadanie, czyli do korzystania z Vuex.