Vue.js: Dynamiczne parametry
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że Ci, w jaki sposób możemy dynamizować parametry i będziemy chcieli to osiągnąć po to, aby
wyświetlić sobie szczegóły użytkownika, czyli mamy nasz routing, który fajnie działa.
Natomiast chciałbym po kliknięciu tutaj w szczegóły, żeby nas przynosiło do adresu ukośnik user, ukośnik
np. 1, bo taki będzie jego identyfikator 2, 3 itd.
I teraz, po pierwsze, będę chciał sobie wygenerować do tego celu link, OK.
Więc przejdziemy do User i do UserItem. Zobacz, tutaj mieliśmy search i pokaże ci, jak wygenerować link,
który będzie również wyglądał poprawnie.
Nie będzie to co prawda, button, chociaż można byłoby tak zrobić, ale musielibyśmy przypisywać zdarzenie kliknięcia
z poziomu kodu JavaScript. Natomiast skorzystamy z router-link standardowo.
Ustawiamy jego to,
to jest bardzo ważne. W sposób dynamiczny, bo jeżeli piszemy to tak i powiem np. user, to nie mogę tutaj
wpisać czegoś w sposób dynamiczny. Natomiast jeżeli zrobimy to tak jak to się robi z props, czyli zbindujemy
je, to wtedy muszę tutaj to wpisać w formie takiego string'u i do tego dodamy user.id.
Czyli będziemy mieli adres np. ukośnik.user
1 i teraz chciałbym tutaj, żeby jeszcze te klasy, które na tym przycisku były, również zostały zaaplikowane
do elementu a, który będzie pod spodem.
Więc zróbmy to w ten sposób.
I jeszcze ten element, też chciałbym, żeby tam się znalazł.
Więc wystarczy, że zrobimy to w taki oto sposób i powinno to wyglądać poprawnie.
Zobaczmy tutaj, po odświeżeniu, okazuje się, że tak mamy taki oto element i kieruje np. do user 1.
Natomiast, jeżeli tutaj kliknę, to jak widzisz, nic takiego się nie wydarzyło, to znaczy nie wczytał się żaden komponent,
bo nie zdefiniowaliśmy takiej ścieżki i teraz chcę Ci pokazać jak to zrobić. Skoro tutaj mamy sprawę załatwioną.
Przygotowałem widok UserDetails, którym będziemy chcieli wyświetlać.
I on zakłada, że otrzyma użytkownika i wyświetli jego imię, identyfikator, wiek i płeć.
Natomiast zanim to zrobimy, to przejdziemy tutaj do naszego routes.js i będziemy chcieli sobie zaimportować
ten komponent UserDetails.
OK.
Kiedy to już będziemy mieli, to będę chciał skonfigurować nową ścieżkę i to co jest bardzo ważne, to możemy
tworzyć dynamiczne parametry, czyli jeżeli zrobimy coś takiego i następnie dwukropek, dwukropek jest tutaj
kluczowy, id, to stworzymy ścieżkę, która będzie pasować, jeżeli ktoś wpisze user, ukośnik cokolwiek, ale
to cokolwiek my będziemy mogli przechwycić i będzie pod parametrem id
dla nas dostępne, więc wstawmy sobie tutaj komponent UserDetails, OK,
w ten sposób i teraz jeżeli ktoś przejdzie pod taki adres, pod ten adres będziemy mogli przejść, klikając
w nasz odnośnik tutaj, to będziemy mogli przejść do naszego komponentu.
On teraz generuje błędy.
Z tego powodu, że oczekuje, że otrzyma user, ale jeszcze go nie ma.
Natomiast, gdybyśmy chcieli przechwycić samo id, które tutaj wpisaliśmy, to możemy się do tego odwołać
w dowolnym miejscu. Może byśmy sobie to wykomentowali i zrobili paragraf, to możemy się do tego odwołać
pod route.
Jest to dostępne na każdej instancji params i następnie id, czyli ta nazwa, którą tam podałem.
Jeżeli zrobimy coś takiego, jedynka nam się wyświetli. Natomiast ja będę chciał tutaj jakoś przekazać
użytkownika i zauważ jedną rzecz, jeżeli byś sobie przeszedł do store i tutaj konkretnie do getters, że
przygotowałem taki getter o nazwie user, który zwraca nam funkcję i do tej funkcji możemy podać identyfikator
i na tej podstawie zostanie dla nas w naszym storze Vuex'owym znaleziony użytkownik.
Czyli jeżeli podam jedynkę, to pierwszy użytkownik zostanie z tej tablicy zwrócony, dlatego ja będę chciał
tutaj,
skoro korzystamy z user, zrobić computed property,
którą nazwiemy user i z niej będziemy chcieli zwrócić this. Pamiętasz, że możemy się odwołać do store getter
i nasz getter nazwałem, tak jak tutaj widzisz, user. On nam zwraca funkcję, czyli tak naprawdę możemy go
wywołać i przekazać mu id.
Po id będziemy mogli pobrać za pomocą this.$route.params.id, ale będzie to string i dlatego to nie zadziała.
Więc muszę to przepuścić jeszcze przez number, bo w innym wypadku tutaj lodash, jak sobie wyszukuje i podamy mu
tutaj string, a w tablicy jest number, to nam nic po prostu nie znajdzie.
Natomiast, zauważ, że tak naprawdę tyle wystarczy i wiesz, że to jeszcze można byłoby skrócić gdybyśmy sobie zaimportowali
funkcję pomocniczą mapGetters, ale ja nie będę tego robił. W ten sposób się odwołamy.
Czyli teraz, zawsze kiedy tutaj się odwołujemy do user to mamy go już tutaj w computed property.
I teraz to powinno zadziałać, jak widzimy, tak też się stało, czyli wrócimy do Home.
Do Użytkownicy. Klikam na wybranego i ten użytkownik mi się tutaj wczytuję. Mogę kliknąć wstecz, wybierzmy
Witold Moliński.
Okazuje się, że jak najbardziej wszystko działa poprawnie.
Więc, w ten sposób, możesz sobie dynamizować parametry.
Jak widzisz, tak to wygląda.
I te parametry bardzo prosto się dodaje. Dodaję za pomocą
dwukropka.
Co ważne, tutaj może być jeszcze dalsza część ścieżki np. edit,
czym zajmiemy się już niebawem. Także myślę, że już widzisz w jaki sposób można budować coraz bardziej
rozbudowane aplikacje, bo tutaj moglibyśmy naprawdę znając już Vue czynić cuda, więc ten VueRouter naprawdę nam
się przydaje.
Na sam koniec, jeszcze chciałbym wspomnieć o jednej rzeczy, mianowicie gdybyśmy dodali jakieś query, na
przykład Hello równa się Witam, to możemy to również przechwycić.
W taki oto sposób $route.query i np. hello. To będzie dla nas już sparsowane.
Gdybyśmy to odświeżyli, jak widzisz, jak najbardziej, działa.
Więc to ważne, że również będziemy mogli w ten sposób przechwytywać sobie query, OK, to tyle w tej lekcji.
Widzimy się w kolejnej.