Når du bygger en applikation med Astro-rammeværket, undrer du dig måske over, hvordan du administrerer applikationstilstanden eller deler den mellem komponenter og rammer. Nano Stores er en af ​​de bedste statschefer for Astro, takket være det faktum, at det fungerer med React, Preact, Svelte, Solid, Lit, Angular og Vanilla JS.

Lær, hvordan du administrerer staten i et Astro-projekt. Følg enkle trin for at oprette en grundlæggende note-applikation, der bruger Nano Stores til tilstandsstyring og deler sin tilstand mellem en React- og Solid.js-komponent.

Hvad er Astro?

Astro-rammen giver dig mulighed for at oprette webapplikationer oven på populære UI-frameworks som React, Preact, Vue eller Svelte. Rammen bruger en komponentbaseret arkitektur, så hver side i Astro består af flere komponenter.

For at fremskynde sideindlæsningstiden minimerer frameworket brugen af ​​JavaScript på klientsiden og prærenderer sider på serveren i stedet.

Astro blev designet til at være det ideelle værktøj til at publicere indholdsfokuserede websteder. Tænk på blogs, landingssider, nyhedswebsteder og andre sider, der fokuserer på indhold frem for interaktivitet. For de komponenter, du markerer som interaktive, sender frameworket kun det minimale JavaScript, der er nødvendigt for at aktivere denne interaktivitet.

Installation og opsætning

Hvis du allerede har et Astro-projekt i gang, så spring dette afsnit over.

Men hvis du ikke har et Astro-projekt, skal du oprette et. Det eneste krav til dette er at have Node.js installeret på din lokale udviklingsmaskine.

For at oprette et helt nyt Astro-projekt skal du starte din kommandoprompt, cd ind i mappen du vil oprette dit projekt i, så kør følgende kommando:

npm create astro@latest

Svar "y" for at installere Astro og angiv et navn til dit projekts mappenavn. Du kan henvise til Astro's officielle opsætningsvejledning hvis du sidder fast undervejs.

Når du er færdig med at oprette projektet, følg det op med følgende kommando (dette tilføjer React til projektet):

npx astro add react

Til sidst skal du installere Nano Stores for React ved at køre følgende kommando:

npm i nanostores @nanostores/react

Stadig på din terminal, cd ind i projektets rodmappe og start programmet med en af ​​følgende kommandoer (afhængigt af hvilken af ​​dem du bruger):

npm run dev

Eller:

yarn run dev

Eller:

pnpm run dev

Gå til http://localhost: 3000 i din webbrowser for at se en forhåndsvisning af dit websted.

Med hele dit Astro-projekt opsat, er næste trin at oprette en butik for applikationsdataene.

Oprettelse af Note Store

Opret en fil med navnet noteStore.js fil inde i /src mappe i dit programs rod. Inde i denne fil skal du bruge atom() funktion fra nanobutikker for at oprette en notebutik:

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

Det Tilføj note() funktionen tager en note ind som sit argument og gemmer den inde i notelageret. Den bruger spredningsoperatoren, når sedlen opbevares for at undgå datamutation. Spredningsoperatøren er en JavaScript stenografi til kopiering af objekter.

Oprettelse af Note-Taking-appens brugergrænseflade

Brugergrænsefladen vil blot bestå af et input til at indsamle noten og en knap, der, når der klikkes på den, tilføjer noten til butikken.

Inde i src/komponenter mappe, skal du oprette en ny fil med navnet NoteAddButton.jsx. Indsæt derefter 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 kode tilføjer noten til komponentens tilstand, mens du skriver ind i inputtet. Derefter, når du klikker på knappen, gemmer den noten i butikken. Den griber også noterne fra butikken og viser dem i en uordnet liste. Med denne tilgang vil noten dukke op på siden umiddelbart efter at have klikket på Gemme knap.

Nu i din pages/index.astro fil, skal du importere NoteAdd Button og bruge det inden for tags:

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

"Welcome to Astro.">


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

Hvis du nu går tilbage til din browser, vil du finde input-elementet og knappen gengivet på siden. Indtast noget i inputtet, og klik på Gemme knap. Notatet vises med det samme på siden og forbliver på siden, selv efter du har opdateret din browser.

Delingstilstand mellem to rammer

Lad os sige, at du vil dele tilstanden mellem React og Solid.js. Den første ting du skal gøre er at tilføje Solid til dit projekt ved at køre følgende kommando:

npx astro add solid

Tilføj derefter Nano Stores til solid.js ved at køre:

npm i nanostores @nanostores/solid

For at oprette brugergrænsefladen i solid.js skal du gå ind i src/komponenter mappe og opret en ny fil med navnet Notes.js. Åbn filen og opret Notes-komponenten inde 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 fil importerer du noterne fra butikken, går gennem hver af noterne og viser dem på siden.

For at vise ovenstående Bemærk komponent oprettet med Solid.js, skal du blot gå til din pages/index.astro fil, import NoteAdd Button og bruge det inden for tags:

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

"Welcome to Astro.">



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

Gå nu tilbage til din browser, skriv noget i inputtet, og klik på Gemme knap. Noten vises på siden og fortsætter også mellem gengivelserne.

Andre nye funktioner i Astro

Ved at bruge disse teknikker kan du administrere tilstanden i din Astro-applikation og dele den mellem komponenter og rammer. Men Astro har mange andre praktiske funktioner såsom dataindsamling, HTML-minificering og paralleliseret gengivelse.