När du skapar en applikation med hjälp av Astro-ramverket kan det uppstå frågor kring hanteringen av applikationens status och hur den ska delas mellan olika komponenter och ramverk. Nano Stores framstår som en av de främsta lösningarna för tillståndshantering inom Astro, särskilt med tanke på dess förmåga att samarbeta med React, Preact, Svelte, Solid, Lit, Angular och till och med ren JavaScript.
Denna genomgång visar hur man effektivt hanterar statusen i ett Astro-projekt. Vi följer enkla steg för att bygga en grundläggande applikation för att skapa anteckningar, som använder Nano Stores för att hantera tillståndet och dela det mellan komponenter i både React och Solid.js.
Vad är Astro?
Astro-ramverket möjliggör utveckling av webbapplikationer ovanpå välkända UI-ramverk som React, Preact, Vue eller Svelte. Ramverket utnyttjar en komponentbaserad struktur, vilket innebär att varje sida i Astro består av flera samverkande komponenter.
För att minska sidladdningstiderna strävar ramverket efter att minimera användningen av JavaScript på klientsidan genom att förrenderera sidorna på servern.
Astro är specifikt designat för att vara ett optimalt verktyg för att publicera webbplatser med fokus på innehåll. Tänk på bloggar, landningssidor, nyhetssajter och andra plattformar där innehållet är i centrum. För de komponenter som markeras som interaktiva, skickar ramverket endast den nödvändiga mängden JavaScript för att aktivera interaktiviteten.
Installation och Konfiguration
Om du redan har ett Astro-projekt igång kan du hoppa över detta avsnitt.
Om inte, behöver du skapa ett nytt Astro-projekt. För att göra detta krävs det att du har Node.js installerat på din dator.
För att sätta upp ett nytt Astro-projekt, öppna din kommandotolk, navigera till den katalog där du vill placera projektet och kör sedan följande kommando:
npm create astro@latest
Bekräfta installationen av Astro genom att svara ”y” och ange ett namn för din projektmapp. Om du stöter på problem, kan du konsultera Astro’s officiella installationsguide.
När projektet har skapats, lägg till React genom att köra detta kommando:
npx astro add react
Slutligen, installera Nano Stores för React med kommandot:
npm i nanostores @nanostores/react
Från projektets rotkatalog, starta utvecklingsservern med ett av följande kommandon (beroende på vilken pakethanterare du använder):
npm run dev
Eller:
yarn run dev
Eller:
pnpm run dev
Besök http://localhost:3000 i din webbläsare för att se din webbplats i aktion.
Nu när Astro-projektet är klart, är nästa steg att skapa en datalagring för applikationen.
Skapa Anteckningslagret
Skapa en fil med namnet noteStore.js i /src-katalogen. Inom denna fil, använd `atom()`-funktionen från Nano Stores för att initialisera ett anteckningslager:
import { atom } from "nanostores"export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Tillagd anteckning: ", note.get())
}
`addNote()`-funktionen accepterar en anteckning som argument och lägger till den i anteckningslagret. Användningen av spridningsoperatorn vid lagring av anteckningen förhindrar datamutation. Spridningsoperatorn är en kortform av JavaScript för att kopiera objekt.
Utformning av Gränssnittet för Anteckningsappen
Gränssnittet kommer att bestå av ett textfält för att ange anteckningen och en knapp. När knappen trycks ned, läggs anteckningen till i lagret.
Skapa en ny fil som heter NoteAddButton.jsx i katalogen src/components. Klistra in följande kod i filen:
import {useState} from "react"
import {addNote, notes} from "../noteStore"export default function NoteAdder() {
const [userNote, setUserNote] = useState('')
return(
<>
<label htmlFor="note">Lägg till en anteckning: </label>
<input type="text" name="note" id="note"
onChange={(event) => setUserNote(event.target.value)} />
<button onClick={() => addNote(userNote)}>Lägg till</button>
<ul>
{
$notes.map((note, index) => {
<li key={index}>{note}</li>
})
}
</ul>
</>
)
}
Denna kod uppdaterar komponenten med anteckningen medan du skriver i textfältet. När knappen trycks ned, sparas anteckningen i lagret. Den hämtar även anteckningarna från lagret och visar dem i en lista. På detta sätt kommer anteckningen att dyka upp direkt efter att du har tryckt på ”Lägg till”-knappen.
Nu, i din pages/index.astro-fil, importera `NoteAddButton` och använd den inuti <main>-taggarna:
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Välkommen till Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
Om du nu går tillbaka till din webbläsare, kommer du att se textfältet och knappen. Skriv något i textfältet och klicka på ”Lägg till”-knappen. Anteckningen kommer direkt att visas på sidan och förbli där även efter att du har uppdaterat webbläsaren.
Dela Status Mellan Två Ramverk
Låt oss anta att du vill dela status mellan React och Solid.js. Först, lägg till Solid i ditt projekt genom att köra:
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å till katalogen src/components och skapa en ny fil som heter Notes.js. Öppna filen och skapa Notes-komponenten:
import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"export default function Notes() {
const $notes = useStore(notes)
return(
<>
<h1>Mina anteckningar</h1>
<ul>
<For each={notes()} />
{(note) => <li>{note}</li>}
</For>
</ul>
</>
)
}
I den här filen importeras anteckningarna från lagret. Sedan itereras var och en av anteckningarna och visas på sidan.
För att visa `Note`-komponenten som skapats med Solid.js, gå till `pages/index.astro`, importera `NoteAddButton` och använd den inom <main>-taggarna:
import NodeAddButton from "../components/NoteAddButton.jsx"
import Nodes from "../components/Notes.jsx"
---
<Layout title="Välkommen till Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
Gå nu tillbaka till webbläsaren, skriv i textfältet och tryck på ”Lägg till”-knappen. Anteckningen kommer att visas på sidan och kommer att finnas kvar även mellan omrenderingar.
Andra Nya Funktioner i Astro
Med dessa tekniker kan du effektivt hantera statusen i din Astro-applikation och dela den mellan komponenter och ramverk. Astro erbjuder även många andra användbara funktioner, som datahämtning, HTML-minifiering och parallell rendering.