Wanneer u een applicatie bouwt met het Astro-framework, vraagt ​​u zich misschien af ​​hoe u de applicatiestatus kunt beheren of delen tussen componenten en frameworks. Nano Stores is een van de beste staatsmanagers voor Astro, dankzij het feit dat het werkt met React, Preact, Svelte, Solid, Lit, Angular en Vanilla JS.

Leer hoe u de status binnen een Astro-project kunt beheren. Volg eenvoudige stappen om een ​​eenvoudige notitietoepassing te maken die Nano Stores gebruikt voor statusbeheer en de status deelt tussen een React- en Solid.js-component.

Wat is Astro?

Met het Astro-framework kunt u webapplicaties maken bovenop populaire UI-frameworks zoals React, Preact, Vue of Svelte. Het raamwerk maakt gebruik van a componentgebaseerde architectuur, dus elke pagina in Astro bestaat uit verschillende componenten.

Om de laadtijd van pagina's te versnellen, minimaliseert het raamwerk het gebruik van JavaScript aan de clientzijde en worden pagina's vooraf weergegeven op de server.

Astro is ontworpen als het ideale hulpmiddel voor het publiceren van op inhoud gerichte websites. Denk aan blogs, landingspagina's, nieuwswebsites en andere pagina's die zich richten op inhoud in plaats van op interactiviteit. Voor de componenten die u als interactief markeert, verzendt het framework alleen het minimale JavaScript dat nodig is om die interactiviteit mogelijk te maken.

Installatie en configuratie

Als u al een Astro-project actief heeft, kunt u dit gedeelte overslaan.

Maar als u geen Astro-project heeft, moet u er een maken. De enige vereiste hiervoor is het hebben Knooppunt.js geïnstalleerd op uw lokale ontwikkelingsmachine.

Om een ​​gloednieuw Astro-project te maken, start u uw opdrachtprompt, cd in de map waarin u uw project wilt maken, en voer vervolgens de volgende opdracht uit:

npm create astro@latest

Antwoord "y" om Astro te installeren en geef een naam op voor de mapnaam van uw project. Je kunt naar Astro's verwijzen officiële installatiehandleiding als je onderweg vastloopt.

Als u klaar bent met het maken van het project, volgt u dat op met de volgende opdracht (hiermee wordt React aan het project toegevoegd):

npx astro add react

Installeer ten slotte Nano Stores voor React door de volgende opdracht uit te voeren:

npm i nanostores @nanostores/react

Nog steeds op uw terminal, cd naar de hoofdmap van het project en start de toepassing met een van de volgende opdrachten (afhankelijk van welke u gebruikt):

npm run dev

Of:

yarn run dev

Of:

pnpm run dev

Ga naar http://localhost: 3000 in uw webbrowser om een ​​voorbeeld van uw website te bekijken.

Nu uw Astro-project helemaal is ingesteld, is de volgende stap het creëren van een opslag voor de applicatiegegevens.

Het notitiearchief maken

Maak een bestand met de naam notitieStore.js bestand binnen de /src map in de hoofdmap van uw toepassing. Gebruik in dit bestand de atoom() functie van nanowinkels een notitiearchief maken:

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

De addNote() functie neemt een notitie als argument en slaat deze op in de notitieopslag. Het gebruikt de spread-operator bij het opslaan van het biljet om gegevensmutatie te voorkomen. De spread-operator is een JavaScript-steno voor het kopiëren van objecten.

De gebruikersinterface van de notitie-app maken

De gebruikersinterface bestaat eenvoudigweg uit een invoer om de notitie te verzamelen en een knop die, wanneer erop wordt geklikt, de notitie aan de winkel toevoegt.

Binnen in de src/componenten map, maak een nieuw bestand met de naam OpmerkingAddButton.jsx. Plak vervolgens de volgende code in het bestand:

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

Deze code voegt de notitie toe aan de status van de component terwijl u in de invoer typt. Wanneer u vervolgens op de knop klikt, wordt de notitie in de winkel opgeslagen. Het haalt ook de notities uit de winkel en geeft ze weer in een ongeordende lijst. Met deze aanpak wordt de notitie onmiddellijk op de pagina weergegeven nadat u op de knop hebt geklikt Redden knop.

Nu in uw pagina's/index.astro bestand, moet u importeren OpmerkingToevoegenKnop en gebruik het binnen de tags:

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

"Welcome to Astro.">


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

Als u nu teruggaat naar uw browser, ziet u het invoerelement en de knop op de pagina weergegeven. Typ iets in de invoer en klik op de Redden knop. De notitie verschijnt onmiddellijk op de pagina en blijft op de pagina staan, zelfs nadat u uw browser heeft vernieuwd.

Status delen tussen twee raamwerken

Stel dat u de status tussen React en Solid.js wilt delen. Het eerste dat u hoeft te doen, is Solid aan uw project toevoegen door de volgende opdracht uit te voeren:

npx astro add solid

Voeg vervolgens de Nano Stores voor solid.js toe door het volgende uit te voeren:

npm i nanostores @nanostores/solid

Om de gebruikersinterface in solid.js te maken, gaat u naar het src/componenten map en maak een nieuw bestand met de naam Notes.js. Open het bestand en maak de Notes-component erin:

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

In dit bestand importeert u de notities uit de winkel, doorloopt u alle notities en geeft u deze weer op de pagina.

Om bovenstaande aan te tonen Opmerking component gemaakt met Solid.js, ga gewoon naar uw pagina's/index.astro bestand, importeren OpmerkingToevoegenKnop en gebruik het binnen de tags:

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

"Welcome to Astro.">



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

Ga nu terug naar uw browser, typ iets in de invoer en klik op de Redden knop. De notitie wordt op de pagina weergegeven en blijft ook tussen weergaven bestaan.

Andere nieuwe functies van Astro

Met behulp van deze technieken kunt u de status binnen uw Astro-applicatie beheren en deze delen tussen componenten en frameworks. Maar Astro heeft nog veel meer handige functies, zoals gegevensverzameling, HTML-minificatie en parallelle weergave.