Vuex – getters – enkapsulacja logiki

W dzisiejszym krótkim wpisie opiszę jak wykorzystałem getters w Vuex do implementacji pobrania statusu repozytorium.

Stara wersja

Powyższy kod wykonuje trzy czynności, w pierwszej kolejności wysyła POST na serwer, informując, że dany plik musi przejść na stage. Kolejne dwie to wywołanie akcji, które pobierają status repozytorium w stage unstage.

Widać bardzo duże podobieństwo i niepotrzebne powielenie kodu. Po stronie serwera, pobranie odbywa się poprzez odpytanie tej samej metody RetriveStatus, różnicą jest jedynie typ statusu.

Warto by zmienić lekko podejście, zlikwidować duplikację.

Nowsza wersja

No ok, dwa odpytania serwera po „te same” dane. Zmieńmy to:

Jak widać spore zmiany, pozbyliśmy się dwóch wywołań. Zastąpione one zostały jednym wywołaniem funkcji fetch_repository_status, pobiera ona nie filtrowane dane. Przypisuje je następnie do jednego stanu, repositoryStatus.

Ok, to teraz wyświetlmy to na widoku:

Działa? Działa pięknie. Jest tylko jeden problem z tym rozwiązaniem. Jeżeli będę chciał wykorzystać taka listę w innym miejscu , będę musiał powielić kod. Zobaczmy jak będzie wyglądała implementacja z wykorzystaniem getters.

Najnowsza wersja

Getters w Vuex, są koncepcyjnie tożsame z computted we Vue. Generalnie chodzi o to, że jest to miejsce w którym możemy poddać filtracji nasze dane. Co warto zauważyć, filtracji, a więc procesowi który nie zmienia nam stanu aplikacji.

a teraz wykorzystanie w komponencie Vue:

Korzyści są oczywiste, wydzielenie logiki do osobnego miejsca. Dzięki temu użycie plików ze stage lub ustage sprowadza się do wywołania powyższej linijki. Dodatkowo jakiekolwiek modyfikacje w przyszłości będą znacznie łatwiejsze. Jedno miejsce gdzie jest logika = jedno miejsce do zmiany.

Podsumowanie

Tym rozbudowanym wpisem opisałem dość prosty mechanizm gettersVuex. Jednakże chciałem również nakreślić problem wydzielania logiki i powielania kodu. Powyższy przykład można zastosować do każdego innego frameworka czy języka. Odpowiednie oddzielenie zależności znacznie ułatwi nam pracę oraz utrzymanie kodu, pamiętajmy o tym!