Při vytváření aplikace pomocí frameworku Astro vás možná zajímá, jak spravovat stav aplikace nebo jej sdílet mezi komponentami a frameworky. Nano Stores je jedním z nejlepších státních manažerů pro Astro, a to díky tomu, že pracuje s React, Preact, Svelte, Solid, Lit, Angular a Vanilla JS.

Naučte se řídit stát v rámci Astro projektu. Postupujte podle jednoduchých kroků a vytvořte základní aplikaci pro psaní poznámek, která používá Nano Stores pro správu stavu a sdílí svůj stav mezi komponentou React a Solid.js.

Co je Astro?

Framework Astro vám umožňuje vytvářet webové aplikace nad populárními frameworky uživatelského rozhraní, jako jsou React, Preact, Vue nebo Svelte. Rámec používá a architektura založená na komponentách, takže každá stránka v Astro se skládá z několika komponent.

Aby se urychlila doba načítání stránky, rámec minimalizuje používání JavaScriptu na straně klienta a místo toho předvykresluje stránky na serveru.

Astro bylo navrženo jako ideální nástroj pro publikování obsahově zaměřených webů. Vzpomeňte si na blogy, vstupní stránky, zpravodajské weby a další stránky, které se zaměřují na obsah před interaktivitou. U komponent, které označíte jako interaktivní, framework odešle pouze minimální JavaScript potřebný k aktivaci této interaktivity.

Instalace a nastavení

Pokud již máte spuštěný Astro projekt, tuto sekci přeskočte.

Ale pokud nemáte Astro projekt, budete si ho muset vytvořit. Jediným požadavkem na to je mít Node.js nainstalován na vašem místním vývojovém počítači.

Chcete-li vytvořit zcela nový projekt Astro, spusťte příkazový řádek, cd do adresáře ve kterém chcete vytvořit svůj projekt, pak spusťte následující příkaz:

npm create astro@latest

Chcete-li nainstalovat Astro, odpovězte „y“ a zadejte název názvu složky vašeho projektu. Můžete se obrátit na Astro's oficiální návod k nastavení pokud uvíznete na cestě.

Jakmile dokončíte vytváření projektu, pokračujte následujícím příkazem (tím přidáte React do projektu):

npx astro add react

Nakonec nainstalujte Nano Stores for React spuštěním následujícího příkazu:

npm i nanostores @nanostores/react

Stále na svém terminálu, cd do kořenové složky projektu a spusťte aplikaci pomocí libovolného z následujících příkazů (v závislosti na tom, který z nich používáte):

npm run dev

Nebo:

yarn run dev

Nebo:

pnpm run dev

Jít do http://localhost: 3000 ve webovém prohlížeči, abyste viděli náhled svého webu.

Když je váš projekt Astro nastaven, dalším krokem je vytvoření úložiště pro data aplikace.

Vytvoření úložiště poznámek

Vytvořte soubor s názvem noteStore.js soubor uvnitř /src adresář v kořenovém adresáři vaší aplikace. Uvnitř tohoto souboru použijte atom() funkce od nanoobchody pro vytvoření úložiště poznámek:

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

The přidat poznámku() funkce vezme poznámku jako svůj argument a uloží ji do úložiště poznámek. Při ukládání poznámky používá operátor spread, aby se zabránilo mutaci dat. Operátor šíření je a JavaScript zkratka pro kopírování objektů.

Vytvoření uživatelského rozhraní aplikace pro psaní poznámek

Uživatelské rozhraní se bude jednoduše skládat ze vstupu pro shromažďování poznámky a tlačítka, které po kliknutí přidá poznámku do obchodu.

Uvnitř src/komponenty adresář, vytvořte nový soubor s názvem PoznámkaAddButton.jsx. Dále do souboru vložte následující kód:

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

Tento kód přidá poznámku ke stavu komponenty při psaní do vstupu. Poté, když kliknete na tlačítko, uloží se poznámka do obchodu. Také bere poznámky z obchodu a zobrazuje je v neuspořádaném seznamu. S tímto přístupem se poznámka zobrazí na stránce ihned po kliknutí na Uložit knoflík.

Nyní ve vašem pages/index.astro soubor, musíte importovat PoznámkaAddButton a používat jej v rámci značky:

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

"Welcome to Astro.">


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

Pokud se nyní vrátíte do svého prohlížeče, najdete vstupní prvek a tlačítko vykreslené na stránce. Zadejte něco do vstupu a klikněte na Uložit knoflík. Poznámka se na stránce okamžitě zobrazí a zůstane na stránce i po obnovení prohlížeče.

Sdílení stavu mezi dvěma rámci

Řekněme, že chcete sdílet stav mezi React a Solid.js. První věc, kterou musíte udělat, je přidat Solid do projektu spuštěním následujícího příkazu:

npx astro add solid

Dále přidejte Nano Stores pro solid.js spuštěním:

npm i nanostores @nanostores/solid

Chcete-li vytvořit uživatelské rozhraní v solid.js, přejděte dovnitř src/komponenty adresář a vytvořte nový soubor s názvem Notes.js. Otevřete soubor a vytvořte v něm komponentu Notes:

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

V tomto souboru importujete poznámky z obchodu, procházíte každou z poznámek a zobrazíte je na stránce.

Chcete-li ukázat výše uvedené Poznámka komponentu vytvořenou pomocí Solid.js, jednoduše přejděte do svého pages/index.astro soubor, import PoznámkaAddButton a používat jej v rámci značky:

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

"Welcome to Astro.">



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

Nyní se vraťte do prohlížeče, zadejte něco do vstupu a klikněte na Uložit knoflík. Poznámka se zobrazí na stránce a také přetrvává mezi vykreslením.

Další nové funkce Astro

Pomocí těchto technik můžete spravovat stav uvnitř vaší aplikace Astro a sdílet jej mezi komponentami a frameworky. Ale Astro má mnoho dalších užitečných funkcí, jako je sběr dat, miniifikace HTML a paralelizované vykreslování.