Når du bygger en applikasjon med Astro-rammeverket, lurer du kanskje på hvordan du administrerer applikasjonstilstanden eller deler den mellom komponenter og rammeverk. Nano Stores er en av de beste statlige lederne for Astro, takket være det faktum at den fungerer med React, Preact, Svelte, Solid, Lit, Angular og Vanilla JS.

Lær hvordan du administrerer staten i et Astro-prosjekt. Følg enkle trinn for å lage en grunnleggende notatapplikasjon som bruker Nano Stores for tilstandsadministrasjon og deler tilstanden mellom en React- og Solid.js-komponent.

Hva er Astro?

Astro-rammeverket lar deg lage nettapplikasjoner på toppen av populære UI-rammeverk som React, Preact, Vue eller Svelte. Rammeverket bruker en komponentbasert arkitektur, så hver side i Astro består av flere komponenter.

For å øke hastigheten på sidens lastetid, minimerer rammeverket bruken av JavaScript på klientsiden og forhåndsrenderer sider på serveren i stedet.

Astro ble designet for å være det ideelle verktøyet for å publisere innholdsfokuserte nettsteder. Tenk på blogger, landingssider, nyhetsnettsteder og andre sider som fokuserer på innhold fremfor interaktivitet. For komponentene du merker som interaktive, vil rammeverket bare sende det minimale JavaScript som trengs for å aktivere den interaktiviteten.

Installasjon og oppsett

Hvis du allerede har et Astro-prosjekt i gang, hopp over denne delen.

Men hvis du ikke har et Astro-prosjekt, må du opprette et. Det eneste kravet for dette er å ha Node.js installert på din lokale utviklingsmaskin.

For å lage et helt nytt Astro-prosjekt, start ledeteksten, cd inn i katalogen du vil opprette prosjektet ditt i, kjør deretter følgende kommando:

npm create astro@latest

Svar "y" for å installere Astro og gi et navn for prosjektets mappenavn. Du kan referere til Astro's offisiell oppsettopplæring hvis du står fast underveis.

Når du er ferdig med å lage prosjektet, følg det opp med følgende kommando (dette legger React til prosjektet):

npx astro add react

Til slutt, installer Nano Stores for React ved å kjøre følgende kommando:

npm i nanostores @nanostores/react

Fortsatt på terminalen din, cd inn i prosjektets rotmappe og start programmet med en av følgende kommandoer (avhengig av hvilken av dem du bruker):

npm run dev

Eller:

yarn run dev

Eller:

pnpm run dev

Gå til http://localhost: 3000 i nettleseren for å se en forhåndsvisning av nettstedet ditt.

Når Astro-prosjektet er ferdig konfigurert, er neste trinn å opprette en butikk for applikasjonsdataene.

Opprette notatbutikken

Lag en fil med navnet noteStore.js fil inne i /src katalogen i programmets rot. Inne i denne filen bruker du atom() funksjon fra nanobutikker for å opprette en notatbutikk:

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

De legge til notat() funksjonen tar inn et notat som argument og lagrer det inne i notatlageret. Den bruker spredningsoperatøren når seddelen lagres for å unngå datamutasjon. Spredningsoperatøren er en JavaScript stenografi for kopiering av objekter.

Opprette brukergrensesnittet for notat-appen

Brukergrensesnittet vil ganske enkelt bestå av en inngang for å samle notatet og en knapp som, når den klikkes, legger notatet til butikken.

Inne i src/komponenter katalog, opprett en ny fil med navnet NoteAddButton.jsx. Deretter limer du inn følgende kode i filen:

import {useState} from"react"
import {addNote, notes} from"../noteStore"
exportdefaultfunctionNoteAdder() {
const [userNote, setUserNote] = useState('')
return(
 <>
"note">Add a note: </label>
"text" name="note" id="note"
 onChange={(event) => setUserNote(event.target.value)} />
 addNote(userNote)}>Add</button>


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

Denne koden legger til notatet til komponentens tilstand mens du skriver inn i inndata. Deretter, når du klikker på knappen, lagres notatet i butikken. Den henter også notatene fra butikken og viser dem i en uordnet liste. Med denne tilnærmingen vil notatet vises på siden umiddelbart etter at du har klikket på Lagre knapp.

Nå i din pages/index.astro fil, må du importere NoteAdd Button og bruke den innenfor tagger:

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

"Welcome to Astro.">


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

Hvis du nå går tilbake til nettleseren din, vil du finne input-elementet og knappen gjengitt på siden. Skriv inn noe i inngangen og klikk på Lagre knapp. Notatet vil umiddelbart vises på siden og vil vedvare på siden selv etter at du har oppdatert nettleseren din.

Delingstilstand mellom to rammer

La oss si at du vil dele tilstanden mellom React og Solid.js. Det første du må gjøre er å legge til Solid til prosjektet ditt ved å kjøre følgende kommando:

npx astro add solid

Deretter legger du til Nano Stores for solid.js ved å kjøre:

npm i nanostores @nanostores/solid

For å lage brukergrensesnittet i solid.js, gå inn i src/komponenter katalog og opprett en ny fil med navnet Notes.js. Åpne filen og lag Notes-komponenten inne i den:

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> 
 </>
 )
}

I denne filen importerer du notatene fra butikken, går gjennom hver av notatene og viser den på siden.

For å vise det ovenfor Merk komponent opprettet med Solid.js, bare gå til din pages/index.astro fil, import NoteAdd Button og bruke den innenfor tagger:

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

"Welcome to Astro.">



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

Gå nå tilbake til nettleseren din, skriv inn noe i inngangen og klikk på Lagre knapp. Notatet vil vises på siden og fortsetter også mellom gjengivelsene.

Andre nye funksjoner i Astro

Ved å bruke disse teknikkene kan du administrere tilstanden i Astro-applikasjonen din og dele den mellom komponenter og rammeverk. Men Astro har mange andre nyttige funksjoner som datainnsamling, HTML-minifisering og parallellisert gjengivelse.