Vue.js: Funkcje pomocnicze
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
Zobaczyłeś już wszystkie najważniejsze składowe pracy z Vuex i może na początku one się wydają dziwne,
ale kiedy będziesz tworzył bardziej zaawansowane aplikacje z Vue, to być może sięgniesz po Vuex, bo po prostu
ci się przyda. Natomiast to jeszcze nie koniec, bo chciałbym Ci pokazać, jak sobie troszkę uprościć życie.
Do tej pory, jeżeli chcieliśmy się odwołać w naszym kodzie np. tutaj w components UserList do użytkowników,
czyli tutaj do tego state, to musieliśmy napisali this.$store.state.users.
Natomiast, co ciekawe można to w prosty sposób, uprościć jeszcze bardziej.
Tutaj możemy sobie zaimportować pewne funkcje, które nam się przydadzą.
Pierwsza z nich to będzie mapState i importujemy ją z vuex.
I ta funkcja pozwoli nam na to, abyśmy mogli pisać np. this.users, a to będzie nam na mapowiało do this.$store
state.users.
W jaki sposób możemy to zrobić?
Otóż tutaj, będę musiał to na moment wyciąć.
Gdzie mieliśmy computed, napiszemy sobie mapState.
W ten oto sposób i podamy sobie tablice, gdzie napiszemy np. users,
Jeżeli zrobimy coś takiego, sprawdźmy, czy to będzie działać.
Jak widzisz działa, to od teraz możemy się odwoływać do this.users, czyli w zasadzie to, co robiliśmy
tutaj users, ale nie musimy tworzyć własnego computed properties.
I tutaj możesz podać również inne rzeczy w tej tablicy.
Natomiast jeżeli chciałbyś również mieć swoje computed, a nie odpisywać ich w całości, to możemy mieć
swoje computed properties, właśnie w taki sposób zrobione, ale możemy je zmiksować za pomocą operatora
spread, dostępnego na obiektach, właśnie w nowym zapisie ECMAScript, który jest tutaj wspierany przez webpacka
z użyciem właśnie możemy napisać tutaj mapState.
I tutaj wewnątrz tego mapState podamy te tablice i zrobimy users, czyli tak naprawdę te dwa obiekty wtedy
będą zmiksowane, a nie nadpiszemy naszego computed.
Natomiast nie możemy tutaj i tutaj nazwać tego users.
W tym przypadku tutaj, to co mamy musielibyśmy nazwać np. data.
I musielibyśmy sobie iterować po data po naszych danych.
To powinno teraz działać poprawnie.
Natomiast tutaj będziemy mieli users, a dzięki temu powinno nam to zadziałać, jeżeli tutaj wpiszemy sobie
po prostu this.users, zobaczmy.
To akurat taki przykład, trochę bardziej rozwinięty i dlatego tak to wygląda.
Wybierzmy sobie mężczyźni i tak dalej. Działa to poprawnie. Natomiast możemy to samo zrobić np. z getterami, czyli
możemy również zrobić mapGetters, teraz, w ten sposób from vuex.
I tutaj również będziemy chcieli sobie zrobić mapGetters, czyli ta funkcja po wywołaniu zwraca obiekt i
on jest tutaj miksowany z naszym obiektem computed.
Tutaj również możemy napisać np. female i male dzięki temu bezpośrednio można się będzie odwoływać do
tego w ten sposób.
Oczywiście w templatce poprzez samo female, powinno nam to również zadziałać.
Odświeżmy, zobaczmy, OK.
Mamy jakiś błąd. Tutaj zabrakło litery S.
Jeszcze raz mężczyźni,
kobiety.
Jak widzisz, wszystko działa poprawnie,
już teraz i tutaj można również tworzyć aliasy i gdybyś do tego mapGetters, nie przekazywał tablicy, tylko
przekazał byś taki oto obiekt, wewnątrz tej funkcji, to mógłbyś np. napisać kobiety równa się female
i to by sprawiło, że pod this kobiety mielibyśmy to, co jest pod this store getters female.
Podobnie zresztą mapstate, można sobie tworzyć aliasy,
ale zazwyczaj nie jest to potrzebne.
Ok, czyli gdybym tutaj nie miał takiego swojego data, to jak widzisz bardzo szybko można sobie stworzyć
np. this users i to będzie kierowało na ten długi zapis.
Podobnie będzie z akcjami i mutacjami.
Jeżeli przejdziemy do naszego UserItem tutaj, to będę mógł sobie zaimportować import.
I tutaj sobie wpiszemy mapMutations i mapActions.
from vuex i będziemy mogli tutaj się do tego odwołać tutaj, gdzie mamy computed.
My tutaj nie mieliśmy computed, więc po prostu je dodamy,
computed i to się będzie równało obiekt, którym chce sobie rozstrzelić mapMutations i podam tutaj
tablice. Mutacja, z której my korzystaliśmy, czyli tutaj to było update. Też możemy dla niej stworzyć alias
i zrobimy sobie jeszcze mapActions i akcja, z której korzystamy poniżej, to jest, jak widzisz remove. jeżeli
zrobimy coś takiego, ok,
To powinniśmy teraz móc pisać sobie tutaj po prostu this.$store,
w zasadzie this.update.remove. Natomiast w złym miejscu to zrobiłem, to nie powinno być computed, tylko w methods
oczywiście, bo są to metody, więc to powinno być w tym oto miejscu. Tak byśmy to zmiksowali. Natomiast, z uwagi
na fakt, że tutaj nie ma potrzeby tworzenia tego, co tutaj mieliśmy, tylko można to będzie od razu przekazać,
to teraz jeżeli sobie tutaj wywołamy update, to będziemy mogli przekazać ten payload, który nas interesował i
pamiętasz jak to wyglądało.
Możemy go tutaj przekazać, po prostu, od razu, czyli możemy tutaj napisać type i pod tym type zrobimy sobie,
tylko musielibyśmy to zrobić w ten sposób, type,
byłoby to w tym przypadku age, tak jak mieliśmy wcześniej. Następnie byśmy sobie zrobili value i tutaj bezpośrednio
odwołanie to event.target.value i jeszcze byśmy zrobili id
i tutaj byśmy zrobili bezpośrednie odwołanie do user.id.
Ok,
no i tak to też powinno zadziałać, chociaż oczywiście tutaj mógłbyś sobie stworzyć metodę o innej nazwie
np. updateInfo i w tej updateInfo robił byś this update this remove i byś to przekazywał, więc w sumie wydaje mi
się, że chyba to będzie lepszym pomysłem, więc wycofam te zmiany, ale chciałem pokazać, że to też jest
możliwe.
Cofnijmy się do takiego poziomu jaki był, nazwijmy to updateInfo. Gdzieś jeszcze to mieliśmy, również tutaj
update
info albo updateUser.
Może nawet tak będzie najlepiej, dla tego przykładu.
Sam wiesz, że to nie ma większego sensu.
Czy w zasadzie, nie sensu, ale znaczenia, tutaj zrobimy sobie removeUser, ok i przejdziemy tutaj i te metody,
które ja wcześniej usunąłem, będziemy mogli dodać z powrotem, ok. I tutaj wewnątrz, po prostu nie będziemy
musieli pisać this.store itd. tylko będziemy mogli napisać this.update.
Oczywiście tutaj można było zrobić jakiś alias, czyli np. store update, ale zróbmy to w ten sposób this.update
i od razu tutaj, co ważne już przekazujemy payload, dlatego, że już nie podajemy nazwy tej mutacji
tak jak było w comit'cie, czyli payload, który nas tam interesował to było id
i wiem, że jest to this.user.id.
Następnie mieliśmy type i wiemy, że to będzie przekazane pod type i value będzie pod e.target value, czyli
tak jak mieliśmy to wcześniej.
Natomiast sam fakt, że this.update już nam kieruje gotową mutację, nam tutaj właśnie pomaga, więc ja jeszcze
dodam sobie tutaj metodę do usuwania i zobaczysz jak to wygląda. W ten sposób by to wyglądało, czyli
this.remove za pomocą tego mapowania.
Powinien nam tam poprawnie kierować.
Zobaczymy.
Mamy tutaj jakiś błąd, ok. Zabrakło przecinka w tym miejscu.
Teraz powinno być w porządku.
Edytujemy sobie coś. Zmienimy wartość na 33. Ona się zmieniła rzeczywiście wszędzie. Usuniemy Mateusza
Nowaka.
Po dwóch sekundach będzie usunięty.
Czyli wszystko się zgadza.
Jak zatem widzisz, takie metody pomocnicze jak Ci pokazałem mapState, mapGetters, mamy
bez żadnego problemu i również mapMutations.
Natomiast jak to rozwiążemy już później,
to zależy od ciebie, bo moglibyśmy od razu z tego update skorzystać tutaj i przekazać również cały ten payload,
który wpadłby do naszego store'a w odpowiednie miejsce do mutacji czy akcji.