Vue.js: Gettery
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 tej lekcji pokażę ci, jak korzystać z getterów przy użyciu Vuex.
Gettery, to będą trochę jak computed properties, ale zaraz do tego przejdziemy. To, co ja zrobiłem, to do naszej
tabelki dodałem taki select i chciałbym móc tutaj filtrować,
po tym czy to jest mężczyzna czy kobieta. Po prostu, po płci i będziemy mogli to zrobić. Chcę Ci pokazać krok
po kroku, więc tutaj, na początek chciałbym dodać sobie v-model i to jest wewnątrz naszego komponentu UserList.
Chciałbym dodać v-model, gender i będziemy musieli sobie coś takiego oczywiście tutaj dodać, więc do
tej pory ten komponent nie miał nawet swojego data, ale teraz miał będzie.
Będzie to data.
Wiemy, że jest to funkcja, która będzie zwracała obiekt i to też pokazuje, że część rzeczy może być w Vuex'ie,
a część rzeczy może być jak najbardziej, lokalna dla wybranego komponentu, więc tutaj napiszę gender i
domyślnie chce, żeby to była wartość pusta, czyli nie wybrana.
Natomiast, tutaj musimy zrobić pewną modyfikację. Ja Ci pokazałem, że w naszej głównej aplikacji zrobiliśmy
sobie computed users i tak naprawdę przekazywaliśmy to do UserList jako props. Nie musimy teraz tego
robić, bo będę chciał tam bezpośrednio na nich operować. Po prostu wstawimy UserList.
Tutaj to pozostaje, dlatego że wewnątrz tej aplikacji renderujemy sobie listę, która jeszcze jest poniżej.
Natomiast będę chciał przejść tutaj i zamiast przyjmować props, to będziemy chcieli odwołać się bezpośrednio
do naszego Vuex store'a, czyli zróbmy sobie coś takiego,
computed i tutaj będziemy mieli users.
Jak widzisz, to nam się powtarza, ale w jednej z kolejnych lekcji pokażę ci, jak możemy automatycznie tworzyć
właśnie coś takiego.
I teraz, jeżeli będziemy korzystali z users to bezpośrednio z Vuex store'a się odwołujemy. Jak widać to wszystko
bez problemu działa, więc teraz będę chciał zrobić sobie filtrowanie właśnie bazujące na tym gender, które
tutaj listy wybierzemy.
Możemy sprawdzić w ogóle czy to się zmienia, jeżeli przejdziemy tutaj do components i wybierzemy sobie
UserList.
Widzimy, że gender jest puste, jeżeli zmienię na mężczyźni, będzie miało wartość male, kobiety female, dlatego
też, że w tym json'ie dodałem sobie coś takiego jak gender i na tej podstawie będziemy mogli filtrować.
No i w zasadzie teraz moglibyśmy tutaj gdzie zrobiliśmy computed users,
tutaj zrobić sobie filtrowanie, nie byłoby w tym nic złego,
czyli moglibyśmy tutaj zrobić users i następnie filter, w zależności od gender.
Natomiast, możemy to zrobić również bezpośrednio w naszym storze.
I teraz, to zależy już od ciebie, bo jeżeli wyłącznie w jednym komponencie będziesz miał jakiś computed
propertie, to możesz to spokojnie zrobić tutaj.
Natomiast, jeżeli będziesz chciał się odwoływać do czegoś takiego w wielu miejscach, to lepiej to zrobić
bezpośrednio na tym naszym storze, więc to już zależy od ciebie.
Ja chcę Ci pokazać jak się to robi w Vuex'ie.
Czyli przejdźmy do store'a.
I możemy dodać coś takiego jak getters. Tak to się nazywa, jest tutaj obiekt i w nim będą funkcje.
Chciałbym zrobić właśnie funkcję, która pozwoli nam wybrać gender. W zasadzie moglibyśmy zrobić coś takiego
jak female i to będzie funkcja i w niej sobie zwrócimy.
No właśnie, ale co pomyślałbyś, że tutaj będziemy mieli this.users, no ale nie.
Okazuje się, że nie te funkcje, które tutaj w getterach dodajemy.
One otrzymają state jako pierwszy parametr, a getters jako drugi, czyli wszystkie inne gettery,
na razie, zostawimy to tak, więc odwołamy się do state i następnie tutaj users, ok i zrobimy sobie filter
i wiemy, że jeżeli chodzi o female, to tutaj będziemy mieli jednego użytkownika w pętli
i chcę zwrócić, jeżeli user.gender równa się female.
W ten sposób sobie to odfiltrujemy, zróbmy sobie również to samo dla mężczyzn, czyli napiszemy male.
Ok, to powinno nam już działać i teraz wrócimy do UsersList.
I w tym miejscu zrobimy coś takiego,
if this gender równa się female, to chcemy zwrócić,
no właśnie co,
this.store.getters i następnie będziemy mieli female, czyli wydaje się, że znowu jest to długi zapis,
natomiast znowu w jednej z kolejnych lekcji grupowo ci pokażę, jak to wszystko można zautomatyzować.
W przeciwnym wypadku zróbmy sobie else if this.gender równa się male, to zwrócimy this.$store.getters.male.
Ok, a w przeciwnym wypadku zrobimy taki oto
return. No dobrze, sprawdzimy czy to ma sens.
Mamy wybranych, wszyscy wybieramy mężczyzn, mamy samych mężczyzn, oczywiście, to nie dotyczy tutaj tego filtrowania,
ale to z prostego powodu, ono jest niezależne zupełnie w tej aplikacji.
Tutaj wszyscy użytkownicy są wyświetleni.
Ok, jeżeli wybierzemy kobietę, mamy tylko kobiety, więc jak widzisz, działa to poprawnie i nie wiem czy
ten przykład był najlepszy.
Moglibyśmy również tutaj dodać sobie, taki przykład z to do, powiedzmy, że mielibyśmy rzeczy do zrobienia
i te które są już ukończone to moglibyśmy na takim storze dodać sobie getter completed i tylko wtedy zwracać.
Więc to już zależy od konkretnego przypadku, ale pamiętaj, że tutaj wewnątrz Vuex'a, jak najbardziej możesz
stworzyć takie getter'y i w zasadzie to jest prawie to samo co tworzenie computed properties, które mieliśmy
np. w tym miejscu, czyli tak by to wyglądało.
Ok, to zatem było tyle w tej lekcji, później jak wspomniałem, pokażę ci jeszcze jak zrobić tak, żeby po
wpisaniu this female, gdzieś tutaj. W tej templatce się od razu się do takiego gettara odwoływać.
Natomiast na razie to tyle. Będziemy jeszcze do tego tematu wracać.