Dowiedz się, jak wykorzystać zarządzanie stanem do zasilania aplikacji Astro.

Budując aplikację przy użyciu frameworka Astro, możesz zastanawiać się, jak zarządzać stanem aplikacji lub udostępniać go pomiędzy komponentami i frameworkami. Nano Stores jest jednym z najlepszych menadżerów stanu dla Astro, dzięki temu, że współpracuje z React, Preact, Svelte, Solid, Lit, Angular i Vanilla JS.

Dowiedz się, jak zarządzać stanem w projekcie Astro. Wykonaj proste kroki, aby utworzyć podstawową aplikację do robienia notatek, która wykorzystuje Nano Stores do zarządzania stanem i udostępnia swój stan pomiędzy komponentem React i Solid.js.

Co to jest astro?

Framework Astro umożliwia tworzenie aplikacji internetowych w oparciu o popularne frameworki UI, takie jak React, Preact, Vue czy Svelte. Framework wykorzystuje m.in architektura oparta na komponentach, więc każda strona w Astro składa się z kilku komponentów.

Aby przyspieszyć ładowanie strony, framework minimalizuje użycie JavaScript po stronie klienta i zamiast tego wstępnie renderuje strony na serwerze.

instagram viewer

Astro zostało zaprojektowane jako idealne narzędzie do publikowania stron internetowych zorientowanych na treść. Pomyśl o blogach, stronach docelowych, witrynach z wiadomościami i innych stronach, które skupiają się na treści, a nie na interaktywności. W przypadku komponentów oznaczonych jako interaktywne framework wyśle ​​tylko minimalny kod JavaScript niezbędny do umożliwienia tej interaktywności.

Instalacja i konfiguracja

Jeśli masz już uruchomiony projekt Astro, pomiń tę sekcję.

Jeśli jednak nie masz projektu Astro, musisz go utworzyć. Jedynym wymaganiem jest posiadanie Node.js zainstalowany na lokalnej maszynie programistycznej.

Aby utworzyć zupełnie nowy projekt Astro, uruchom wiersz poleceń, cd do katalogu w którym chcesz utworzyć projekt, a następnie uruchom następujące polecenie:

npm create astro@latest

Odpowiedz „y”, aby zainstalować Astro i podaj nazwę folderu swojego projektu. Możesz zwrócić się do Astro oficjalny poradnik konfiguracji jeśli utkniesz po drodze.

Po zakończeniu tworzenia projektu wykonaj następujące polecenie (spowoduje to dodanie React do projektu):

npx astro add react

Na koniec zainstaluj Nano Stores dla React, uruchamiając następującą komendę:

npm i nanostores @nanostores/react

Wciąż na terminalu, przejdź do folderu głównego projektu i uruchom aplikację za pomocą dowolnego z poniższych poleceń (w zależności od tego, którego z nich używasz):

npm run dev

Lub:

yarn run dev

Lub:

pnpm run dev

Iść do http://localhost: 3000 w przeglądarce internetowej, aby zobaczyć podgląd swojej witryny.

Następnym krokiem po skonfigurowaniu projektu Astro jest utworzenie magazynu danych aplikacji.

Tworzenie magazynu notatek

Utwórz plik o nazwie noteStore.js plik wewnątrz /src katalog w katalogu głównym aplikacji. Wewnątrz tego pliku użyj atom() funkcja od nanomagazyny aby utworzyć magazyn notatek:

import { atom } from"nanostores"
exportconst notes = atom([])
exportfunctionaddNote(note) {
 notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}

The Dodaj notatkę() funkcja przyjmuje notatkę jako argument i przechowuje ją w magazynie notatek. Używa operatora rozprzestrzeniania podczas przechowywania notatki, aby uniknąć mutacji danych. Operatorem rozprzestrzeniania jest a Skrót JavaScript do kopiowania obiektów.

Tworzenie interfejsu użytkownika aplikacji do robienia notatek

Interfejs użytkownika będzie po prostu składał się z danych wejściowych umożliwiających pobranie notatki oraz przycisku, który po kliknięciu dodaje notatkę do sklepu.

W środku źródło/komponenty katalogu, utwórz nowy plik o nazwie UwagaAddButton.jsx. Następnie wklej następujący kod do pliku:

import {useState} from"react"
import {addNote, notes} from"../noteStore"
exportdefaultfunctionNoteAdder() {
const [userNote, setUserNote] = useState('')


return(
 <>


"text" name="note" id="note"
 onChange={(event) => setUserNote(event.target.value)} />


    

     {
     $notes.map((note, index) => {
  • {note}</li>
     })
     } 
     </ul>
     </>
     )
    }
    

    •

Ten kod dodaje notatkę do stanu komponentu podczas wpisywania danych wejściowych. Następnie po kliknięciu przycisku zapisuje notatkę w sklepie. Pobiera także notatki ze sklepu i wyświetla je na nieuporządkowanej liście. Dzięki takiemu podejściu notatka pojawi się na stronie od razu po kliknięciu Ratować przycisk.

Teraz w twoim strony/indeks.astro plik, który musisz zaimportować UwagaDodajprzycisk i użyj go w tagi:

import NoteAddButton from"../components/NoteAddButton.jsx"

"Welcome to Astro.">


 </main>
</Layout>
// Other code

Jeśli teraz wrócisz do przeglądarki, na stronie znajdziesz element wejściowy i przycisk. Wpisz coś w polu wejściowym i kliknij Ratować przycisk. Notatka natychmiast pojawi się na stronie i pozostanie na niej nawet po odświeżeniu przeglądarki.

Udostępnianie stanu pomiędzy dwoma frameworkami

Powiedzmy, że chcesz udostępnić stan pomiędzy React i Solid.js. Pierwszą rzeczą, którą musisz zrobić, to dodać Solid do swojego projektu, uruchamiając następującą komendę:

npx astro add solid

Następnie dodaj Nano Stores dla solid.js, uruchamiając:

npm i nanostores @nanostores/solid

Aby utworzyć interfejs użytkownika w solid.js, wejdź do środka źródło/komponenty katalog i utwórz nowy plik o nazwie Notes.js. Otwórz plik i utwórz w nim komponent Notes:

import {useStore} from"@nanostores/solid"
import {notes} from"../noteStore"
import {For} from"solid-js"
exportdefaultfunctionNotes() {
const $notes = useStore(notes)
return(
 <>
My notes</h1>
    


     {(note) => <li>{note}li>}
     </For>
     </ul> 
     </>
     )
    }

W tym pliku importujesz notatki ze sklepu, przeglądasz każdą z notatek i wyświetlasz je na stronie.

Aby pokazać powyższe Notatka komponentu utworzonego za pomocą Solid.js, po prostu przejdź do swojego strony/indeks.astro plik, import UwagaDodajprzycisk i użyj go w tagi:

import NodeAddButton from"../components/NoteAddButton.jsx"
import Nodes from"../components/Notes.jsx"

"Welcome to Astro.">



 </main>
</Layout>
// Other code

Teraz wróć do przeglądarki, wpisz coś w polu wejściowym i kliknij Ratować przycisk. Notatka pojawi się na stronie i będzie widoczna pomiędzy renderowaniami.

Inne nowe funkcje Astro

Korzystając z tych technik, możesz zarządzać stanem aplikacji Astro i udostępniać go pomiędzy komponentami i frameworkami. Ale Astro ma wiele innych przydatnych funkcji, takich jak zbieranie danych, minifikacja HTML i renderowanie równoległe.