Vue.js: Mutacje
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
Jedną z najważniejszych zasad przy pracy z Vuex'em jest to, żeby nie modyfikować stanu aplikacji bezpośrednio.
Czyli gdybyśmy przeszli tutaj do naszego store, to nie powinniśmy np. tych użytkowników modyfikować
w bezpośredni sposób.
I teraz, co to znaczy bezpośredni.
To znaczy, że tak jak np. tutaj mamy this.$store.state.users, to nie powinniśmy tutaj przypisywać czegoś
nowego, w taki bezpośredni sposób, tylko jeżeli chcemy coś zmienić, to powinniśmy wykonać mutację.
Podobnie jest zresztą tutaj w UserItem.
Zauważ, że my tutaj mamy przypisany v-model do UserName i dzięki temu, jeżeli wiek czy imię i nazwisko będę
chciał zmienić, to to nam rzeczywiście działa.
Natomiast zmodyfikowaliśmy teraz stan aplikacji, można powiedzieć, za plecami Vuex'a.
Nie powinniśmy tego robić, głównie z powodów takich do odbugowania, czyli tutaj mamy taki panel Vuex.
I żebyśmy mogli porównywać sobie snapshoty, wracać do poprzednich stanów, o czym będziemy mówić jednej z kolejnych
lekcji.
Zawsze powinniśmy wykonywać mutacje, więc zapamiętaj, że stanu nie powinniśmy modyfikować bezpośrednio.
No i v-model, modyfikuje nam ten stan bezpośrednio i dlatego będziemy chcieli to zmienić.
Będę chciał tutaj zrezygnować z v-modelu w ten sposób. Natomiast będę chciał przypisać value, zbindować to tutaj,
do tego pola i następnie zdarzenie change i na zdarzenie change będę chciał wykonać metodę, którą nazwiemy
sobie update i powiedzmy będzie to w tym przypadku imię i nazwisko, ale może po prostu w ogóle update
i będziemy je chcieli przekazać jako pierwszy parametr event, a jako drugi, co tutaj aktualizujemy. Napiszemy,
że jest to name,
może po prostu w ten sposób i teraz taką metodę będziemy musieli utworzyć.
Natomiast chciałbym zrobić rzecz podobną, w przypadku wieku, czyli tutaj również będę chciał zrobić, ale
update age. To będzie metoda dodana tutaj na tym komponencie.
No i tutaj będę chciał również zbindować po prostu value,
czyli stworzymy sobie sami tak naprawdę ten v-model.
Tutaj możemy dodać modyfikator number, aby to co było przechwycone z tego pola zawsze było konwertowane na
number, ok.
I teraz jeszcze tutaj musimy zamknąć, tylko cudzysłów.
Powinno być teraz już w porządku. Dodajemy sobie zatem taką metodę tutaj, w methods,
update i ona będzie przyjmować event, tak jak sobie to tam zapisaliśmy i jaka dana została zaktualizowana,
czyli powiedzmy, napiszmy sobie tutaj ok, no i teraz to pewnie będzie działać, bo jeżeli zrobimy sobie event target
value to będziemy mieli odwołanie do tego, co tutaj zostało zmienione.
Zróbmy sobie tego console.log i zróbmy również type, tylko po to, żeby sprawdzić czy to ma sens. OK, widzę
że h się zmienia.
Czyli ma to sens, a jeżeli zmienimy tutaj imię i nazwisko to widzimy name.
W takim razie jest wszystko w porządku i teraz z tej metody update, ja będę chciał zacomit'ować sobie
mutacje. Jak to strasznie brzmi, musimy sobie przejść do naszego store'a, gdzie dodamy mutacje, oprócz state,
teraz możemy sobie dodać coś takiego jak mutations.
I tutaj będziemy sobie dodawać nazwy tych mutacji,
więc ja również będę chciał ją nazwać update,
natomiast wcale nie musi się ona tak nazywać.
Ważne jest to, że ta mutacja tutaj otrzyma state i to jest jedyny sposób poprawny w Vuex'sie żeby modyfikować
stan, czyli poprzez mutacje zawsze. Ok, czyli tutaj będziemy mogli napisać state i będziemy musieli sobie
wyszukać tego użytkownika konkretnego i go zmodyfikować.
Natomiast, to zrobimy za sekundę, najpierw będę chciał sobie taką mutację tutaj za zacomit'ować, czyli jak
to wygląda.
Otóż, odwołujemy się do this.$store i następnie comit i podajemy nazwę mutacji, czyli jeżeli mutacje
nazwaliśmy update tutaj, to piszemy też update i jako drugi parametr, możemy podać obiekt, w którym będzie
tzw. payload, czyli to co zostanie tutaj przyjęte.
Oprócz state zostanie przyjęty tzw. payload.
To będzie ten obiekt, który tutaj sobie przekażemy, więc ja tutaj będę chciał napisać, po prostu, value,
to jest e.target value, a type, będzie to po prostu type,
czyli mogę to nawet skrócić do takiego zapisu, czyli chce zacomit'ować taką mutację. Zobaczymy tutaj, czy
jakieś błędy się pojawią, jeżeli coś zmienię.
OK i żaden błąd się nie pojawił, zobaczmy czy w ogóle nam się tutaj wykonała ta funkcja, console.log.
Payload, może w ten sposób, zmieniamy cokolwiek i jak widzimy, rzeczywiście to wszystko nam tutaj działa.
Więc w tym momencie możemy się odwołać do state i następnie będziemy musieli w users sobie wyszukać takiego
użytkownika. Jak to zrobić?
Otóż skorzystamy z biblioteki loadash, więc teraz sobie ją szybko zainstalujemy,
npm install --save loadash, ok. On nam się zainstaluje, uruchomimy sobie raz jeszcze to, co tutaj mamy.
Przy okazji zobaczysz, że naprawdę fajnie się pracuje w tym workflow z webpack'iem. Możemy sobie wszystko fajnie podzielić.
Napiszemy npm start i będę chciał ten loadash sobie tutaj właśnie w naszym storze zaimportować, jako
podkreślnik from loudash.
Ta biblioteka, po prostu, nam pomoże znaleźć odpowiedniego użytkownika tutaj w naszym state. Ok, czyli w
jaki sposób możemy to zrobić. Napiszmy sobie
może const index i odwołamy się do findIndex na tej bibliotece loudash. Chcemy szukać w tablicy state
users.
Ok.
I będziemy chcieli jeszcze jedną rzecz zrobić ważną.
Mianowicie szukać po id, czyli napiszemy sobie
znajdźmy użytkownika, który ma id, takie jak w payload.id.
Jeszcze to sobie musimy tutaj podać. To na tej tablicy
users, którą mamy w tym miejscu, znajdzie użytkownika np. id 3 i kiedy go będę miał, to będę mógł zmienić
jego name czy np. age.
Więc zaraz sobie dodamy jeszcze to id, ale mając już coś takiego, będę mógł napisać state, users, odwołać się
do tego id i zmienić jego, to co zostało podane w payload, czyli to będzie payload.type na payload.value.
Mam nadzieję, że to ma sens tylko jeszcze id sobie musimy tutaj przekazać. Skąd weźmiemy sobie to id i tego użytkownika.
Otóż pod user.id to mamy,
nie ma z tym najmniejszego problemu, więc w zasadzie to jest tutaj pod this dostępne, czyli jeśli napiszemy
id, to będziemy mieli this.id, bo this to jest ten nasz jeden użytkownik konkretny, ok. W zasadzie this user.id.
Okej, tak to musimy zrobić i powinno to mieć sens.
Sprawdźmy czy to jakieś błędy, może się pojawiają czy nie, zmienimy sobie wartość np. na 34 i widzimy,
że to się ładnie zmienia. Zmienimy również Anna Zielińska, dodajmy tutaj jakieś literki i wszystko jest
w porządku.
Tak więc, w ten sposób comit'ujemy sobie mutacje i tych mutacji możesz utworzyć ile chcesz, ale zapamiętaj, że
mutacje mogą modyfikować bezpośrednio state, które tutaj otrzymują jako pierwszy parametr, a jako drugi
jest to payload, taki obiekt, do którego przekazujemy sobie te wartości.
Gdybyś tutaj chciał przekazać np. tylko wartość 10, to możesz wpisać ją bezpośrednio i wtedy ona też
będzie dostępna. Natomiast jeżeli więcej rzeczy, to w obiekcie.
Fajnie również sobie możemy tutaj dodać bibliotekę lodash, która nam pozwoli, jak widzisz, wykonać taką oto operację.
Natomiast jedna niesłychanie ważna rzecz.
Mutacje muszą być wykonywane w sposób synchroniczny, czyli musimy wiedzieć, że po wykonaniu się tej naszej
funkcji, kiedy wykona się ta mutacja, to ona już jest zakończona.
To jest bardzo ważne, czyli tutaj nie może być tak, że wyślemy jakieś zapytanie AJAX, a jak otrzymamy dane to
coś tutaj wystawimy.
Takie rzeczy będziemy mogli robić z użyciem akcji.
I do tego wrócimy w kolejnej lekcji, natomiast na razie zapamiętaj, że mutacje mogą bezpośrednio modyfikować
state, ale muszą być one synchroniczne, czyli wykonuje się funkcja z góry na dół i stan ma być już zmodyfikowany.
A to wszystko jest nam potrzebne po to, żeby można było lepiej dywagować nasze aplikacje i lepiej po
prostu je tworzyć.
Mimo, że teraz wydaje się, że jest trochę bardziej skomplikowane.