Nuxt.js: Podpinanie komponentów pod dane z serwera

0:00Położenie akcji pod.

0:01Piliśmy nasze dane z backendu do Stora i

0:05teraz wypadałoby użyć tych danych w naszych komponentach.

0:08Nie wszystkich danych użyjemy faktycznie,

0:10ale możemy już się tutaj przygotować na to, żeby to działało.

0:14Czyli tak naprawdę moglibyśmy to sobie komentować.

0:18Albo przenieśmy to może do tej sekcji

0:21skryptu i komentujemy ją sobie tutaj, żeby.

0:25Wie skąd to wyłapał.

0:26Swoja drogą są rozszerzenia do

0:29skauta, które sprawiają, że faktycznie pliki się ładnie można je wykorzystywać.

0:35W związku z czym

0:36zróbmy dla testu pozbądźmy się tych wszystkich właściwości stąd.

0:42W razie czego dalej mamy je dostępne w Gicie.

0:47Albo po prostu zrobimy sobie nowy plik.

0:50W którym to chwilowo tutaj wrzucimy.

0:52Więc aplikacja nam się niestety oczywiście wywróciła.

0:55Ale dzieje się tak dlatego, bo w naszych

0:57komponentach wykorzystamy Properties, które nie są teraz zdefiniowane.

1:01Więc co możemy zrobić, to odnieść się do

1:03Store store state content i w tym momencie tego w content powinno nam ruszyć.

1:09Możemy komentować chwilowo tutaj ten content section.

1:13Zobaczmy czy to zadziała.

1:14W kolejnej mapie.

1:18Niezależnie od tego jaka jest treść, to

1:20trzeba ten komponent tutaj ręcznie wrzucić.

1:23Prawdopodobnie cały layout nam się też zepsuje, bo nie spodziewaliśmy się

1:27tego, aby ich nie było, więc może po prostu zaprojektujemy wszystkie naraz.

1:30Zobaczymy jak będzie wyglądała nasza aplikacja.

1:32Czyli tutaj również.

1:36Story stats.

1:39Full info tutaj section in content, więc możemy zrobić tutaj store state.

1:48Content.

1:52I to też powinno działać.

1:53Czy mieliśmy jeszcze jakieś inne komponenty?

1:55Zdaje mi się, że nie.

1:57Zobaczymy co się stanie.

2:01Musimy od strony.

2:06Detail vario include function.

2:08Zobaczmy co się stało. I w jakim miejscu.

2:11Full info box component czyli full info box jest komponentem,

2:17który prawdopodobnie będziemy musieli troszkę zmodyfikować jak go usuniemy.

2:25Odświeżamy.

2:32To faktycznie Temple of Contents tam się ładnie wędrowała.

2:35Zobaczcie, że mamy tutaj już biografie Writing, Legacy, Rembrandt itd.

2:41Itd. Jeśli chodzi o samą treść.

2:47Tutaj tych naszych rzeczy to się niestety nam nie udało, bo to prawdopodobnie

2:50potraktowało całego stringa jako tablicę, więc to co możemy zrobić to.

2:57Upewnić się, że. No właśnie.

3:00Tutaj mamy informację Invalid prop type check failed for property content string.

3:08W związku z czym możemy zrobić to tak.

3:11Że w naszym content section.

3:14Tutaj to po prostu podmieniłem na.

3:19Na stringa content section.

3:22Czyli tutaj content to będzie string.

3:26I w tym momencie.

3:28Musimy zmienić.

3:31Nasz content.

3:33Gdzie jest content pt. Content?

3:36Dobrze i zmieńmy sobie ten content, bo to

3:38jest bezpośrednio nowe property content Aspen Rail

3:46i będziemy po prostu zwracać bez props content, tylko że będziemy je

3:52sprite ować, czyli rozdzielać stringa na pojedyncze elementy tablic na podstawie.

3:59Znaku nowej linii zapiszemy.

4:03Tutaj damy przecinek i podmieniamy tę wartość.

4:06Zobaczmy.

4:08Czy to coś zmieniło i zmieniło?

4:10I faktycznie widać, że.

4:12Tutaj mamy już tą treść.

4:14Ona wydaje mi się, że jest troszkę rozjechana, więc.

4:18Jest całkiem duże prawdopodobieństwo, że

4:20są po prostu dwa znaki nowej linii na każdy paragraf przychodzące z API.

4:25I dokładnie tak było.

4:26W związku z czym

4:28widzimy, że mamy już naszą treść i ta treść powinna być też linkowane.

4:33Jeżeli to sobie klikniemy, zobaczmy czy

4:35faktycznie nas przenosi, czyli list of selected works.

4:38Tutaj się wydaje, że akurat jest to pusty element.

4:41Możliwe, że takie informacje dostajemy.

4:43Tutaj już ciężko o tym zadecydować. Tak to wygląda.

4:46Swoją drogą wydaje mi się, że notes

4:48i references mogą być tutaj puste i przychodzić z innych metod naszego API.

4:54Tym się nie powinniśmy w tym momencie przejmować.

4:56Natomiast tak, mamy już podpięte dwa komponenty pod nasze dane.

5:00Zobaczmy o co chodzi z tym full info boxem.

5:02Przejdźmy to znowu do pliku view.

5:05Full info box może nie komentować Ingo

5:08ale go cofniemy, ale w międzyczasie sobie po prostu wypijemy tutaj full info.

5:15To przekazywaliśmy.

5:19Jej stringi.

5:22Drugi parametr gorzej string.

5:24Fajnie, wszyscy o tym wiedzą.

5:25Może to być custom parser, którego w tym momencie nie potrzebujemy więcej manuala.

5:29A trzeci parametr jest to.

5:33Własna indeksacja, więc jeśli to zapiszemy

5:35to wyświetli nam się ten Jameson i będzie on ładnie sformatowany.

5:39Jeżeli byśmy długo jeszcze to byłoby jeszcze ładniej.

5:42W związku z czym widzę, że tutaj mamy General Name.

5:48Spróbujmy może przekazać do tego komponentu.

5:52Full info od General.

5:54Zobaczymy czy to się stanie.

5:56Możemy tak naprawdę zmienić coś na

5:57poziomie Routing Middleware to przekazywać.

6:01Czy coś tu się wydarzyło?

6:02Error card i przeczytajmy treść tego błędu.

6:06Invalid prod.

6:08While property content expected.

6:11Agregat string.

6:13Full info box powinien otrzymywać obiekt content section.

6:20Content section.

6:23Który przyjmuje stringa to już nie powinno być wtedy.

6:25Wydaje mi się, że to jest jakiś stary błąd.

6:26Tak btw.

6:30Jest na to function czyli detail value w naszym full info boksie.

6:37Nie jest w tym momencie singlem.

6:40Jeśli jest string.

6:42To co możemy z tym zrobić?

6:44Tak naprawdę chyba to przefiltrować.

6:45Czyli jeśli typeof.

6:49Detail Vario jest różny od string.

6:58Return false.

7:00Oczywiście moglibyśmy tutaj zmienić tą logikę, żeby była troszkę prostsza.

7:05Odśwież.

7:09Function.

7:11Czy mamy tutaj podaną linijkę?

7:14Nie mamy.

7:17Ale tutaj też się to znajduje dobrze, więc

7:19mamy po prostu dwa filtry i trzeba też zrobić z tego.

7:23Filtra tutaj.

7:25Swoją drogą jestem ciekaw czy moglibyśmy tutaj zrobić.

7:29Optional.

7:31Wywoływanie.

7:32Czyli jeśli takiej metody nie będzie, to zwróci nam się null.

7:36Jeśli zwróci nam się null na filtrze to powinno się przefiltrować teoretycznie.

7:40Zobaczmy czy to dało radę.

7:41Tam chyba był jakiś błąd.

7:44Tak niestety nie mamy włączonego tutaj Biebera tak aby zrozumiał taki sen,

7:49w związku z czym po prostu tutaj taki sam safe check jak robiliśmy tam.

7:57Napiszmy.

7:59Odświeżam.

8:05I faktycznie wyświetliły nam się tutaj te dane.

8:08Oczywiście one się wyświetlają nie do końca dobrze, bo tak jak pamiętamy.

8:15To co przekazujemy do tego komponentu.

8:17Jest to obiekt i kluczem jest to, co wyświetla się po lewej stronie tabeli.

8:22Wartością jest to, co pojawia się po prawej stronie tabeli.

8:25W związku z czym te wartości będą wyglądały tak, jakby pochodziły z API.

8:30W związku z czym możemy to sobie tutaj

8:32longa na przykład przekonwertować do takich czytelnych ludzkich opisów.

8:38No i będziemy musieli też uzupełnić main image tą informacją, którą też

8:43posiadamy już z API, tylko będziemy musieli ją po prostu wypełnić.

8:47W związku z czym na tym skupimy się w następnej lekcji nad

8:51tym komponentem, aby go troszkę jeszcze wyczyścić.

8:53Ale udało nam się już prze propagować całą informację z naszego API do.

9:01Faktycznie naszej aplikacji i nasz indeks jest o wiele czystszy.

9:04Przynajmniej ta sekcja, gdzie znajdują się Java skrypty jest o wiele czystsza.

9:08Tutaj możemy się tego też pozbyć.

9:10W razie czego mamy odniesienie do tego w.

9:15Story.

9:17My też możemy się pozbyć ikon w tym momencie w sumie też.

9:20Czyli cała logika tego komponentu w tym momencie

9:25sprowadza się tylko i wyłącznie do przekazania mi serwera na tym widoku.

9:31No i cała reszta to jest content, który

9:33też będziemy jeszcze ujednolicić, aby wszystko szło z aplikacji.

9:37W związku z czym za kilka lekcji prawdopodobnie będziemy

9:40już mieli tutaj same komponenty, które będą renderować dane.

9:44Tutaj też tego się pozbyć.

9:46Oraz ten Witold EB usunąć.

9:50I nasz komponent będzie coraz czystszy, coraz bardziej poprawny

9:54jeżeli chodzi o dobre praktyki w namiocie czy w WO.

9:58Do zobaczenia w kolejnej lekcji, gdzie

10:00skupimy się na komponencie głównych informacji.