När du bygger en applikation med Astro-ramverket kanske du undrar hur du hanterar applikationstillståndet eller delar det mellan komponenter och ramverk. Nano Stores är en av de bästa statliga cheferna för Astro, tack vare att den fungerar med React, Preact, Svelte, Solid, Lit, Angular och Vanilla JS.

Lär dig hur du hanterar staten inom ett Astro-projekt. Följ enkla steg för att skapa en grundläggande anteckningsapplikation som använder Nano Stores för tillståndshantering och delar sitt tillstånd mellan en React- och Solid.js-komponent.

Vad är Astro?

Astro-ramverket låter dig skapa webbapplikationer ovanpå populära UI-ramverk som React, Preact, Vue eller Svelte. Ramverket använder en komponentbaserad arkitektur, så varje sida i Astro består av flera komponenter.

För att snabba upp sidladdningstiden minimerar ramverket användningen av JavaScript på klientsidan och förrenderar sidor på servern istället.

Astro designades för att vara det perfekta verktyget för att publicera innehållsfokuserade webbplatser. Tänk på bloggar, målsidor, nyhetswebbplatser och andra sidor som fokuserar på innehåll framför interaktivitet. För komponenterna som du markerar som interaktiva kommer ramverket bara att skicka det minimala JavaScript som behövs för att aktivera den interaktiviteten.

Installation och uppsättning

Om du redan har ett Astro-projekt igång, hoppa över det här avsnittet.

Men om du inte har ett Astro-projekt måste du skapa ett. Det enda kravet för detta är att ha Node.js installerad på din lokala utvecklingsmaskin.

För att skapa ett helt nytt Astro-projekt, starta din kommandotolk, cd till katalogen du vill skapa ditt projekt i, kör sedan följande kommando:

npm create astro@latest

Svara "y" för att installera Astro och ange ett namn för ditt projekts mappnamn. Du kan hänvisa till Astro's officiell installationshandledning om du har fastnat på vägen.

När du är klar med att skapa projektet, följ upp det med följande kommando (detta lägger till React till projektet):

npx astro add react

Slutligen, installera Nano Stores for React genom att köra följande kommando:

npm i nanostores @nanostores/react

Fortfarande på din terminal, cd in i projektets rotmapp och starta programmet med något av följande kommandon (beroende på vilket av dem du använder):

npm run dev

Eller:

yarn run dev

Eller:

pnpm run dev

Gå till http://localhost: 3000 i din webbläsare för att se en förhandsvisning av din webbplats.

Med ditt Astro-projekt klart är nästa steg att skapa en butik för applikationsdata.

Skapa anteckningsbutiken

Skapa en fil med namnet noteStore.js fil inuti /src katalogen i programmets rot. Inuti den här filen använder du atom() funktion från nanobutiker för att skapa en anteckningsbutik:

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

De Lägg till anteckning() funktionen tar in en anteckning som sitt argument och lagrar den i anteckningsarkivet. Den använder spridningsoperatorn vid lagring av anteckningen för att undvika datamutation. Spridningsoperatören är en JavaScript-stenografi för att kopiera objekt.

Skapar anteckningsappens användargränssnitt

Användargränssnittet kommer helt enkelt att bestå av en ingång för att samla in anteckningen och en knapp som, när den klickas, lägger till anteckningen i butiken.

Inuti src/komponenter katalog, skapa en ny fil med namnet NoteAddButton.jsx. Klistra sedan in följande kod 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>
 </>
 )
}

Den här koden lägger till anteckningen till komponentens tillstånd när du skriver in inmatningen. Sedan, när du klickar på knappen, sparas anteckningen i butiken. Den tar också tag i anteckningarna från butiken och visar dem i en oordnad lista. Med detta tillvägagångssätt kommer anteckningen att dyka upp på sidan omedelbart efter att du klickat på Spara knapp.

Nu i din pages/index.astro fil måste du importera NoteAdd Button och använda den inom taggar:

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

"Welcome to Astro.">


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

Om du nu går tillbaka till din webbläsare hittar du inmatningselementet och knappen renderade på sidan. Skriv något i inmatningen och klicka på Spara knapp. Anteckningen kommer omedelbart att dyka upp på sidan och kommer att finnas kvar på sidan även efter att du har uppdaterat din webbläsare.

Dela tillstånd mellan två ramar

Låt oss säga att du vill dela tillståndet mellan React och Solid.js. Det första du behöver göra är att lägga till Solid till ditt projekt genom att köra följande kommando:

npx astro add solid

Lägg sedan till Nano Stores för solid.js genom att köra:

npm i nanostores @nanostores/solid

För att skapa gränssnittet i solid.js, gå in i src/komponenter katalog och skapa en ny fil med namnet Notes.js. Öppna filen och skapa Notes-komponenten inuti 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 den här filen importerar du anteckningarna från butiken, går igenom var och en av anteckningarna och visar den på sidan.

För att visa ovanstående Notera komponent skapad med Solid.js, gå helt enkelt till din pages/index.astro fil, importera NoteAdd Button och använda den inom taggar:

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

"Welcome to Astro.">



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

Gå nu tillbaka till din webbläsare, skriv in något i inmatningen och klicka på Spara knapp. Anteckningen kommer att dyka upp på sidan och även kvarstå mellan renderingarna.

Andra nya funktioner i Astro

Med hjälp av dessa tekniker kan du hantera tillståndet i din Astro-applikation och dela det mellan komponenter och ramverk. Men Astro har många andra praktiska funktioner som datainsamling, HTML-minifiering och parallelliserad rendering.