Wenn Sie eine Anwendung mit dem Astro-Framework erstellen, fragen Sie sich möglicherweise, wie Sie den Anwendungsstatus verwalten oder ihn zwischen Komponenten und Frameworks teilen können. Nano Stores ist einer der besten Statusmanager für Astro, da es mit React, Preact, Svelte, Solid, Lit, Angular und Vanilla JS funktioniert.

Erfahren Sie, wie Sie den Status innerhalb eines Astro-Projekts verwalten. Befolgen Sie einfache Schritte, um eine einfache Anwendung zum Notieren zu erstellen, die Nano Stores für die Statusverwaltung verwendet und ihren Status zwischen einer React- und Solid.js-Komponente teilt.

Was ist Astro?

Mit dem Astro-Framework können Sie Webanwendungen auf Basis beliebter UI-Frameworks wie React, Preact, Vue oder Svelte erstellen. Das Framework verwendet a Komponentenbasierte Architektur, daher besteht jede Seite in Astro aus mehreren Komponenten.

Um die Ladezeit der Seite zu verkürzen, minimiert das Framework die Verwendung von clientseitigem JavaScript und rendert die Seiten stattdessen auf dem Server vor.

Astro wurde als ideales Tool für die Veröffentlichung inhaltsorientierter Websites entwickelt. Denken Sie an Blogs, Landingpages, Nachrichten-Websites und andere Seiten, bei denen der Inhalt wichtiger ist als die Interaktivität. Für die Komponenten, die Sie als interaktiv markieren, sendet das Framework nur das minimal erforderliche JavaScript, um diese Interaktivität zu ermöglichen.

Installation und Einrichtung

Wenn Sie bereits ein Astro-Projekt haben, überspringen Sie diesen Abschnitt.

Wenn Sie jedoch kein Astro-Projekt haben, müssen Sie eines erstellen. Die einzige Voraussetzung hierfür ist das Haben Node.js auf Ihrem lokalen Entwicklungscomputer installiert.

Um ein brandneues Astro-Projekt zu erstellen, starten Sie Ihre Eingabeaufforderung. cd in das Verzeichnis in dem Sie Ihr Projekt erstellen möchten, und führen Sie dann den folgenden Befehl aus:

npm create astro@latest

Antworten Sie mit „y“, um Astro zu installieren und geben Sie einen Namen für den Ordnernamen Ihres Projekts ein. Sie können sich an Astro's wenden Offizielles Einrichtungs-Tutorial wenn Sie unterwegs nicht weiterkommen.

Wenn Sie mit der Erstellung des Projekts fertig sind, führen Sie anschließend den folgenden Befehl aus (dadurch wird React zum Projekt hinzugefügt):

npx astro add react

Installieren Sie abschließend Nano Stores für React, indem Sie den folgenden Befehl ausführen:

npm i nanostores @nanostores/react

Wechseln Sie immer noch auf Ihrem Terminal in den Stammordner des Projekts und starten Sie die Anwendung mit einem der folgenden Befehle (je nachdem, welchen Sie verwenden):

npm run dev

Oder:

yarn run dev

Oder:

pnpm run dev

Gehe zu http://localhost: 3000 in Ihrem Webbrowser, um eine Vorschau Ihrer Website anzuzeigen.

Nachdem Ihr Astro-Projekt vollständig eingerichtet ist, besteht der nächste Schritt darin, einen Speicher für die Anwendungsdaten zu erstellen.

Erstellen des Notizspeichers

Erstellen Sie eine Datei mit dem Namen noteStore.js Datei innerhalb der /src Verzeichnis im Stammverzeichnis Ihrer Anwendung. Verwenden Sie in dieser Datei die Atom() Funktion von Nanostores So erstellen Sie einen Notizspeicher:

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

Der Notiz hinzufügen() Die Funktion übernimmt eine Notiz als Argument und speichert sie im Notizenspeicher. Beim Speichern der Notiz wird der Spread-Operator verwendet, um Datenmutationen zu vermeiden. Der Spread-Operator ist a JavaScript-Kurzschrift zum Kopieren von Objekten.

Erstellen der Benutzeroberfläche der Notizen-App

Die Benutzeroberfläche besteht lediglich aus einer Eingabe zum Sammeln der Notiz und einer Schaltfläche, die beim Klicken die Notiz zum Shop hinzufügt.

Im Inneren src/components Verzeichnis, erstellen Sie eine neue Datei mit dem Namen NoteAddButton.jsx. Fügen Sie als Nächstes den folgenden Code in die Datei ein:

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

Dieser Code fügt die Notiz zum Status der Komponente hinzu, während Sie in die Eingabe eingeben. Wenn Sie dann auf die Schaltfläche klicken, wird die Notiz im Store gespeichert. Außerdem werden die Notizen aus dem Speicher abgerufen und in einer ungeordneten Liste angezeigt. Bei diesem Ansatz wird die Notiz sofort nach dem Klicken auf auf der Seite angezeigt Speichern Taste.

Jetzt in Ihrem seiten/index.astro Datei, die Sie importieren müssen NoteAddButton und verwenden Sie es innerhalb der Stichworte:

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

"Welcome to Astro.">


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

Wenn Sie nun zu Ihrem Browser zurückkehren, finden Sie das Eingabeelement und die Schaltfläche auf der Seite gerendert. Geben Sie etwas in die Eingabe ein und klicken Sie auf Speichern Taste. Die Notiz wird sofort auf der Seite angezeigt und bleibt auch nach der Aktualisierung Ihres Browsers auf der Seite bestehen.

Zustandsfreigabe zwischen zwei Frameworks

Nehmen wir an, Sie möchten den Status zwischen React und Solid.js teilen. Als Erstes müssen Sie Solid zu Ihrem Projekt hinzufügen, indem Sie den folgenden Befehl ausführen:

npx astro add solid

Fügen Sie als Nächstes die Nano Stores für solid.js hinzu, indem Sie Folgendes ausführen:

npm i nanostores @nanostores/solid

Um die Benutzeroberfläche in solid.js zu erstellen, gehen Sie in die src/components Verzeichnis und erstellen Sie eine neue Datei mit dem Namen Notes.js. Öffnen Sie die Datei und erstellen Sie darin die Notes-Komponente:

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 dieser Datei importieren Sie die Notizen aus dem Store, durchlaufen jede Notiz und zeigen sie auf der Seite an.

Um das Obige zu zeigen Notiz Gehen Sie einfach zu Ihrer Komponente, die mit Solid.js erstellt wurde seiten/index.astro Datei, importieren NoteAddButton und verwenden Sie es innerhalb der Stichworte:

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

"Welcome to Astro.">



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

Gehen Sie nun zurück zu Ihrem Browser, geben Sie etwas in die Eingabe ein und klicken Sie auf Speichern Taste. Die Notiz wird auf der Seite angezeigt und bleibt auch zwischen dem Rendern bestehen.

Weitere neue Funktionen von Astro

Mit diesen Techniken können Sie den Status innerhalb Ihrer Astro-Anwendung verwalten und ihn zwischen Komponenten und Frameworks teilen. Aber Astro verfügt über viele andere praktische Funktionen wie Datenerfassung, HTML-Minimierung und parallelisiertes Rendering.