Nuxt.js: Wykorzystanie Vuexa

0:01Cześć! W tej sekcji będziemy mówić o tym, jak

0:05propagować dane z backendu na frontend w sposób wydajny, w sposób zgodny z

0:09Progressive Enhancement, w sposób, który będzie optymalny zarówno dla naszych

0:14użytkowników, jak i wyszukiwarek czy przeglądarek.

0:18W związku z czym zaczniemy z troszkę innej strony, a mianowicie od Store Stor.

0:23Jest to takie główne miejsce, w którym

0:25przechowujemy globalne dane dla naszej aplikacji.

0:29Oczywiście możemy je podzielić na różne tory, na różne sekcje danego Tora

0:34i domyślnym torem dla Nexta jest WRX WRX czyli.

0:40Implementacja dla View Pattern Flags, czyli taki ekwiwalent Redux dla React.

0:46A.

0:47Ja nie jestem jakimś wielkim fanem WFS czyli DAX.

0:51Natomiast jako że jest to dedykowana.

0:56Droga tworzenia aplikacji, to oczywiście ją tutaj omówimy, więc

1:00analogicznie do pozostałych opcji, które omawialiśmy na samym początku tego kursu.

1:05Mamy tutaj sekcję Store i w tym torze

1:09mamy oczywiście HDMI, które wskazuje nam do odpowiedniej sekcji w dokumentacji.

1:14Clue tego jest takie, że możemy stworzyć

1:17sobie tutaj nowy plik, nazwać go jakkolwiek chcemy.

1:23I w tym momencie, gdy utworzyliśmy

1:25pierwszy plik, my uruchamiamy WFS w naszej aplikacji.

1:29Jeżeli ten katalog jest pusty nie ma.

1:31Nasze bundle są lżejsze, natomiast

1:34dając plik do katalogu store uruchamiamy Vegasa tak jakby go instalujemy.

1:39W związku z czym tutaj mam taki przykład jak wykorzystywać store.

1:44Więc ja po prostu go sobie tutaj skopiuję, żebyśmy nie tracili za dużo czasu.

1:48Wkleję.

1:49No i widzimy, że mamy eksportowane kilka różnych zmiennych.

1:53Z tego są tutaj

1:56zmienne takie jak STAT, czyli stan naszej aplikacji, gdzie trzymamy różne zmienne.

2:03Następnie mamy

2:04T1, czyli takie funkcje, które modyfikują ten wcześniej zadeklarowany stan.

2:10No i generalnie

2:12w Flags są jeszcze komitety czy akcje, które pozwalają nam wywoływać mutacje.

2:20A akcje wywoływać.

2:23Daje nam to dużo różnych ciekawych opcji,

2:25takie jak na przykład historia modyfikacji danego stanu czy inne tego typu rzeczy.

2:31My tu nie będziemy tego potrzebowali.

2:33Jedyne czego my potrzebujemy to dostęp do Store, aby przekazać dane z backendu na

2:37frontend w sposób wydajny i wygodny, więc zmodyfikujemy sobie ten stan

2:42troszkę, zrobimy sobie example state i tutaj podajmy powiedzmy Hello.

2:51Imię tej szansy możemy zmienić na priv tutaj dla.

2:58Każdej z mutacji, którą eksportujemy dostajemy callback, który przyjmuje dwa

3:02parametry i pierwszym parametrem jest ten właśnie nasz statek, który

3:06zadeklarowaliśmy, a drugim jest nasza własna zmienna, która definiuje po

3:11prostu to co będziemy przekazywać i c mutacji jest to aby

3:17zmodyfikować stan, czyli jeśli mamy tutaj tri name na tym statusie.

3:23To możemy zrobić to na takiej zasadzie, że status.

3:28Kropka, egzamin, podstawę.

3:30No to będziemy w stanie tutaj go zmodyfikować, np.

3:34przypisując bezpośrednio do niego naszą wartość tekstową

3:37i ja pozbędę się pozostałych mutacji, bo ich tutaj nie potrzebujemy.

3:41Zapiszę.

3:42I wracając do tego przykładu zobaczmy jak z tego korzystać.

3:45Jak widzimy tutaj jest to jedyny plik,

3:47który jest zdefiniowany w katalogu store i wewnątrz Page index.

3:53Mamy wykorzystany tzw.

3:54pytając co pozwala nam przekazać tę

3:56mutację bezpośrednio do metod naszej aplikacji.

3:59Możemy to w sumie zrobić.

4:01Natomiast nie ma aż takiego tutaj parcia na to jak jest view kota.

4:09No i wydaje mi się, że to jest po prostu jakaś kwestia

4:12przebudowania aplikacji, a nie coś, czym my się musimy w tym momencie przejmować.

4:17Zrobimy jeszcze jeden zapis.

4:20I wygląda na to, że tak.

4:22W związku z czym przejdziemy do Pages.

4:24Przejdziemy do indeksu.

4:25Już niedługo będziemy usuwać te zawsze zakodowane informacje.

4:29Ten full info box z tym z tą tabelką już możemy pozbyć się w sumie na tym etapie.

4:37No i przejeżdżając do treści naszego komponentu faktycznie tutaj możemy

4:42zaimportować nasze MAF Promotions from WRX.

4:47I w metodach, które nie wiem czy mamy

4:49zadeklarowane akurat nie są zadeklarowane, więc zrobimy nowe pole news.

4:55Możemy wykorzystać

4:57mapkę Times, które będzie nam pobierało właśnie tę mutację z tego Store.

5:03I tutaj pierwszym.

5:06Fragmentem tego stringa, który tutaj przekazujemy.

5:09Jest nazwa naszego pliku.

5:10Musimy podać sobie tutaj indeks,

5:12a następnie nazwę mutacji, którą tutaj eksportować.

5:16Nie jest to zbyt silnie typowane.

5:18Dzieje się to wszystko na stringach niestety.

5:22XT trójka będzie poprawnie typowane, więc kopiujemy tutaj name.

5:27I tutaj, i w tym momencie powinniśmy mieć możliwość zmiany nazwy.

5:35Naszego stanu.

5:37Z poziomu aplikacji.

5:38Jednak zanim to zrobimy, wykorzystajmy tutaj.

5:42Huk mam tez.

5:44I wyświetlimy po prostu to co nam się

5:46znajduje obecnie w stanie, czyli Console Log DS Store.

5:52Tak, odwołujemy się do Store

5:54i tak jak tutaj widzieliście mamy tutaj zadeklarowane stat, więc możemy

5:59się do niego odwołać i wyświetlić sobie example.

6:04Z tego.

6:06Zapiszemy.

6:08I tutaj wydaje mi się, że musimy przesunąć to w dół, bo tutaj mamy matmie tej szansy

6:14i muszą się zamknąć w tym miejscu, więc teraz powinno to być ok.

6:19Zapiszemy.

6:21Aplikacja działa.

6:24Nie daliśmy przecinka.

6:25Zapiszmy i w tym momencie już przebudował.

6:28A więc przejdźmy do naszego widoku.

6:33I w konsoli powinniśmy zobaczyć naszą wartość stanu.

6:39I faktycznie jest tutaj napisane Hello!

6:42Czyli jeśli tutaj zmienimy w torze wartość jego początkową

6:46czyli np naszą staty to już może być dowolna wartość.

6:49Tutaj nie ma jakiejś restrykcji,

6:51to może być obiekt, to może być cokolwiek tylko chcemy.

6:54Nawet dane binarne, chociaż tego raczej bym nie polecał.

6:58I powiedzmy, że ćwiczymy, żeby nauczyć się ponownie wykonało.

7:02I faktycznie mamy tutaj 6.

7:05W związku z czym jesteśmy w stanie odczytać dane ze Stora.

7:11I zapis danych dostarcza.

7:14Polega na tym, że tworzymy początkową

7:16wartość stanu i po prostu go później modyfikujemy.

7:19Czyli na przykład jeśli chcielibyśmy dostać się zapisać taki paragraf

7:24w torze, to powinniśmy sobie zrobić na to tutaj tę sekcję summary.

7:28Oczywiście też powinniśmy sobie

7:30najpierw zadeklarować i dopiero później ją zmodyfikować na różnym etapie.

7:35Czyli jeśli chcemy go zmodyfikować, to

7:39w tym momencie możemy zrobić sobie store i tutaj zrobić commit.

7:43Możemy też zobaczyć jak to się dzieje faktycznie w tym przykładzie.

7:48Tak widzimy, że możemy dokonywać commitów, które modyfikują faktycznie wartość danego

7:53stanu, więc przechowujemy to sobie po prostu, czyli dist commit.

7:57I tak samo indeks name todo.

8:02Moglibyśmy też po prostu wywołać.

8:05Tutaj bezpośrednio the name, bo zmapować

8:08to sobie do metod, ale zróbmy bezpośrednio kosmita.

8:10Zapiszmy.

8:14I dodaj to cudo musimy oczywiście zmienić na jakąś inną wartość, czyli powiedzmy.

8:19Halifax State.

8:22Zapisujemy.

8:24Militaria.

8:26Odświeżamy.

8:30I widzimy, że jest tutaj 6x i drugi raz.

8:33Jestem ciekawa czy to faktycznie jest kwestia opóźnienia w renderowaniu.

8:42Czy kwestia, że ta wartość nie została zaktualizowana?

8:44Jak możemy to sprawdzić? Całkiem prosto.

8:47Możemy też po prostu wyrenderować tutaj jakąś wartość.

8:54Jako że jesteśmy w klatce, możemy pozbyć się bez.

9:01I teraz.

9:04Zamiast logować to możemy zrobić test game.

9:11I przekazać tutaj ponownie modified.

9:18Ten commit powinien zadziałać tak na prawdę.

9:20Chyba, że o czymś zapomniałem.

9:22Zobaczmy.

9:24Odświeżamy, jest state i się to nam nie zmodyfikowała.

9:28Jestem ciekawy dlaczego

9:30to powinno być reaktywne, to znaczy powinno się to zmodyfikować.

9:34Zobaczmy jak to wygląda w przykładzie.

9:37Add to do ustawia wartość na to.

9:41Zobaczmy czy czegoś nie pominąłem w tym pliku.

9:46A wszystko wydaje się ok.

9:50Chyba, że modyfikujemy złą wartość.

9:53Zobacz index examples tak wygląda ok.

9:58Wydaje mi się, że tutaj problemem jest to, że mamy tutaj ten prefix index.

10:02A być może jeżeli nasz plik nazywa się index to nie musimy tutaj tego

10:07doprecyzować, tylko po prostu podać bezpośrednio nazwę stringa.

10:10Więc sprawdźmy to w ten sposób.

10:12I faktycznie zadziałało, w związku z czym możemy pozbyć się też

10:17tutaj tego console loga i moglibyśmy bezpośrednio robić commit,

10:21ale nie musimy, bo mamy już tutaj spakowane te mutacje.

10:24W związku z czym widzimy jak zapisać dane do stanu do Store

10:28i te informacje będziemy wykorzystywali po to, aby zapisać dane

10:34w jakiś sposób do Store pobierając informacje z naszego API, który

10:39wcześniej stworzyliśmy i później te informacje ze stara będziemy

10:43przekazywać do odpowiednich komponentów, które będą wędrowały nasze dane.

10:48Więc w kolejnej lekcji opowiem jak można.

10:52Dostać się do naszego API

10:54z poziomu backendu wewnątrz naszych komponentów View.

10:59I zmodyfikować właśnie informacje, które znajdują się na naszej stronie.

11:03Tutaj wyświetlane.