Vuex – wstęp

Postępy

Szybkie spojrzenie na to co wykreowało się w aplikacji. Na chwilę obecną są 4 komponenty:

unstagedFiles – komponent odpowiedzialny za wyświetlanie wszystkich plików, które nie mają wejść do kolejnego commita,

stagedFiles – analogicznie- komponent, który wyświetla pliki, które chcemy włączyć do commita,

commitDetails –  komponent odpowiedzialny za „budowanie” commita, na razie jest tylko nazwa oraz przycisk,

fileChangePreview  –  duży komponent odpowiedzialny za podgląd aktualnych zmian w plikach, zarówno tych w stage jak i unstage. W komponencie tym będziemy mieli możliwość podejrzenia zmian jak i wyłączenia z danego commita.

Każdą z tych operacji opiszę jeszcze dokładnie w kolejnym wpisie. W tym chciałbym się skupić na krótkiej relacji z mojej przygody z Vuex.

Vuex

W każdej aplikacji, w której nacisk położony jest na wysoką modularyzację (a takie są aplikacje pisane w VueJs), przychodzi potrzeba komunikacji pomiędzy komponentami. Zarówno komponentami w konfiguracji rodzic-dziecko, jak i w równoległej konfiguracji dziecko-dziecko. VueJs dostarcza nam wbudowany mechanizm komunikacji, lecz wraz ze wzrostem ilości elementów aplikacji, złożoność oraz narzut na jej implementację znacznie rośnie. Dodatkowo chcielibyśmy zapewnić „czystość” komponentom. Chcielibyśmy uniknąć tworzenia sztucznych komponentów służących wyłącznie jako pośrednicy w komunikacji.

Teoretycznie mogłem stworzyć komponent root dla powyższych komponentów i zaimplementować prostą „szynę”, ale patrząc trochę do przodu, zdaje sobie sprawę, że takich szyn i komponentów pomocniczych może być znacznie więcej. No więc co?

Rozwiązać ten problem chce Vuex. Czym jest Vuex ? Dla mnie Vuex to mechanizm zarządzania stanem aplikacji, przypomina mi trochę taki globalny singleton. Oczywiście z możliwością pełnej modularyzacji i ograniczeniem kontekstów działania.

Instalacja

Na samym początku instalujemy wszystko za pomocą npm.

Struktura plików Vuex w aplikacji jest prosta, wszystkie pliki znajdują się w folderze store.

Poniżej przestawiłem cały kod jaki jest wymagany aby uruchomić Vuex w swojej aplikacji VueJs.

W pliku main.js importujemy sobie instancję Vuex znajdującą się w pliku index.js i przekazujemy do konstruktora Vue.

Sam plik index.js również wygląda bardzo prosto. Pokrótce, na samym początku importujemy sobie wymagane referencje oraz akcję i mutację (o nich później). Jak widać zostały one wydzielone do osobnych plików ale nic nie stoi na przeszkodzie, żeby na początku umieć je w taki sposób jak state.

Należy zwrócić uwagę na tą linię:

Ważne jest aby ona była umieszczona przed inicjalizacją Vuex.

Implementacja

Poniżej opiszę poszczególne elementy, które wchodzą w skład instancji Vuex. Za przykład wezmę instancję z mojej aplikacji.

state– Nic innego jak stan naszej aplikacji.

W powyższym przykładzie, chcemy aby w skład stanu naszej aplikacji wchodziły dwie kolekcje plików.

Przekazując store do instancji Vue automatycznie mamy do niej dostęp, jako globalny obiekt, pod zmienną $store.  Jeżeli w którymś z komponentów chcielibyśmy się odwołać do tych zmiennych, należy to zrobić tak:

Naprawdę proste. Ale czym w takim razie rożni się od zwykłego globalnego obiektu zawierającego zmienne? W Vuex mamy ściśle określone zasady jakimi powinniśmy się kierować, aby zmieniać stan.

mutations- aby poprawnie zmienić stan naszej aplikacji musimy zaimplementować tzw. mutacje. Są to funkcje, które operują na stanie. Tylko w tych funkcjach implementujemy logikę, która ten stan zmienia. I teraz jeżeli mamy potrzebę zmienić stan, wywołujemy daną mutację:

Poniżej implementacja mutacji APPLY_UNSTAGED_FILES

Strict Mode – No dobra ,ale zaraz ktoś spyta

a co mi szkodzi  żeby wywołać ten kod

W tym przypadku czyścimy listę plików poza funkcją mutacji. Oczywiście to przejdzie, ale łamiemy tym samym całą ideę Vuex, równie dobrze moglibyśmy go wywalić.

Oczywiście taka implementacja może być mniej lub bardziej świadoma. Dlatego przychodzi nam z pomocą strict. Jeżeli ustawimy tę flagę na true, to Vuex podczas każdej zmianie stanu z „zewnątrz”, wyrzuci nam wyjątkiem.

Bardzo pomocne, szczególnie w przypadku gdy uczymy się Vuex lub do zespołu dołącza mniej doświadczony programista.

Akcje – główna zasada w Vuex mówi, mutacje wykonujemy synchronicznie. Oczywiście świat, jak i pewnie większość framworków w JS są asynchroniczne, ale nie chcemy z nich rezygnować. W odróżnieniu od mutacji, akcje mogą wywoływać operacje asynchroniczne.

Oczywiście, jeżeli po wykonanej akcji chcemy wywołać mutację to nic nie stoi na przeszkodzie. Wywołujemy poprostu metodę commit z odpowiednimi parametrami.

W powyższym przykładzie, zadeklarowałem akcję, która asynchronicznie odpytuje API o wszystkie pliki, a następnie wywołuje mutację i aktualizuje pliki.

Samo wywołanie akcji w komponencie również jest trywialne, wystarczy wywołać funkcję dispatch oraz przekazać nazwę akcji, którą chcemy wywołać.

W powyższym pliku możemy zwrócić uwagę na jeszcze jedną rzecz. Mianowice import pliku types.

W pliku  types.js znajdują się wszystkie nazwy akcji i mutacji jakie mamy zadeklarowane. Dzięki temu zabiegowi z kodu znikają nam wszystkie „magic strings”. Prosty rozwiązanie, ale niezwykle pomocne.

Podsumowanie

Generalnie sam mechanizm mi się podoba, jak się go opanuje to naprawdę ułatwia komunikację pomiędzy komponentami. Bardzo przydał mi się StrictMode, dzięki niemu wyłapałem nie jeden kardynalny błąd.

Oczywiście, przedstawione rozwiązanie z podziałem implementacji Vuex na osobne pliki nie uchroni nas przed zbytnim ich rozrośnięciem. Potrzebne są nam jakieś moduły. Oczywiście Vuex dostarcza nam taką możliwość. W kolejnym wpisie z tej serii opiszę ten mechanizm.

  • Dzięki za posta, przyda mi się ta wiedza w najbliższym czasie 🙂

  • Spoko wpis, za kilka dni zobaczymy czy sprawdzi się w praktyce 🙂

  • A ja właśnie gdzieś tam zaczęłam się uczyć Vue. Bloga zacznę obserwować, bo wiedza na pewno mi się przyda.