Pri vytváraní aplikácie s rámcom Astro sa možno pýtate, ako spravovať stav aplikácie alebo ho zdieľať medzi komponentmi a rámcami. Nano Stores je jedným z najlepších štátnych manažérov pre Astro, a to vďaka tomu, že pracuje s React, Preact, Svelte, Solid, Lit, Angular a Vanilla JS.

Naučte sa riadiť štát v rámci Astro projektu. Postupujte podľa jednoduchých krokov na vytvorenie základnej aplikácie na písanie poznámok, ktorá používa Nano Stores na správu stavu a zdieľa svoj stav medzi komponentmi React a Solid.js.

Čo je Astro?

Rámec Astro vám umožňuje vytvárať webové aplikácie nad populárnymi rámcami používateľského rozhrania, ako sú React, Preact, Vue alebo Svelte. Rámec používa a architektúra založená na komponentoch, takže každá stránka v Astro pozostáva z niekoľkých komponentov.

Aby sa urýchlil čas načítania stránky, rámec minimalizuje používanie JavaScriptu na strane klienta a namiesto toho predbežne vykresľuje stránky na serveri.

Astro bol navrhnutý ako ideálny nástroj na publikovanie obsahovo zameraných webových stránok. Zamyslite sa nad blogmi, vstupnými stránkami, spravodajskými webmi a inými stránkami, ktoré sa zameriavajú na obsah pred interaktivitou. Pre komponenty, ktoré označíte ako interaktívne, rámec odošle iba minimálny JavaScript potrebný na aktiváciu tejto interaktivity.

Inštalácia a nastavenie

Ak už máte spustený Astro projekt, preskočte túto časť.

Ak však nemáte projekt Astro, budete si ho musieť vytvoriť. Jedinou požiadavkou na to je mať Node.js nainštalovaný na vašom lokálnom vývojovom počítači.

Ak chcete vytvoriť úplne nový projekt Astro, spustite príkazový riadok, cd do adresára v ktorom chcete vytvoriť svoj projekt, potom spustite nasledujúci príkaz:

npm create astro@latest

Ak chcete nainštalovať Astro, odpovedzte „y“ a zadajte názov priečinka vášho projektu. Môžete sa obrátiť na Astro's oficiálny návod na nastavenie ak ste uviazli na ceste.

Po dokončení vytvárania projektu postupujte podľa nasledujúceho príkazu (tým pridáte do projektu React):

npx astro add react

Nakoniec nainštalujte Nano Stores for React spustením nasledujúceho príkazu:

npm i nanostores @nanostores/react

Stále na svojom termináli, cd do koreňového priečinka projektu a spustite aplikáciu ktorýmkoľvek z nasledujúcich príkazov (v závislosti od toho, ktorý z nich používate):

npm run dev

alebo:

yarn run dev

alebo:

pnpm run dev

Ísť do http://localhost: 3000 vo webovom prehliadači, aby ste videli ukážku svojej webovej stránky.

Keď je váš projekt Astro nastavený, ďalším krokom je vytvorenie úložiska pre údaje aplikácie.

Vytvorenie obchodu s poznámkami

Vytvorte súbor s názvom noteStore.js súbor vnútri /src adresár v koreňovom adresári vašej aplikácie. Vo vnútri tohto súboru použite atóm() funkcia od nanoobchody na vytvorenie úložiska poznámok:

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

The pridať poznámku() funkcia berie poznámku ako svoj argument a ukladá ju do úložiska poznámok. Pri ukladaní poznámky používa operátor spread, aby sa zabránilo mutácii údajov. Operátor nátierky je a JavaScript skratka na kopírovanie predmetov.

Vytvorenie používateľského rozhrania aplikácie na vytváranie poznámok

Používateľské rozhranie bude jednoducho pozostávať zo vstupu na zhromaždenie poznámky a tlačidla, ktoré po kliknutí pridá poznámku do obchodu.

Vnútri src/komponenty adresár, vytvorte nový súbor s názvom PoznámkaAddButton.jsx. Potom do súboru prilepte nasledujúci 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 pridáva poznámku k stavu komponentu počas písania do vstupu. Potom, keď kliknete na tlačidlo, uloží sa poznámka do obchodu. Tiež si vezme poznámky z obchodu a zobrazí ich v neusporiadanom zozname. Pri tomto prístupe sa poznámka zobrazí na stránke ihneď po kliknutí na Uložiť tlačidlo.

Teraz vo vašom pages/index.astro súbor, musíte importovať PoznámkaAddButton a použiť ho v rámci značky:

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

"Welcome to Astro.">


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

Ak sa teraz vrátite späť do prehliadača, nájdete vstupný prvok a tlačidlo vykreslené na stránke. Zadajte niečo do vstupu a kliknite na Uložiť tlačidlo. Poznámka sa okamžite zobrazí na stránke a zostane na stránke aj po obnovení prehliadača.

Zdieľanie stavu medzi dvoma rámcami

Povedzme, že chcete zdieľať stav medzi React a Solid.js. Prvá vec, ktorú musíte urobiť, je pridať Solid do projektu spustením nasledujúceho príkazu:

npx astro add solid

Potom pridajte Nano Stores pre solid.js spustením:

npm i nanostores @nanostores/solid

Ak chcete vytvoriť používateľské rozhranie v súbore solid.js, prejdite do súboru src/komponenty adresár a vytvorte nový súbor s názvom Notes.js. Otvorte súbor a vytvorte v ňom komponent 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 súbore importujete poznámky z obchodu, prechádzate cez každú z poznámok a zobrazujete ich na stránke.

Ak chcete ukázať vyššie uvedené Poznámka komponent vytvorený pomocou Solid.js, jednoducho prejdite na svoj pages/index.astro súbor, import PoznámkaAddButton a použiť ho v rámci značky:

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

"Welcome to Astro.">



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

Teraz sa vráťte do prehliadača, zadajte niečo do vstupu a kliknite na Uložiť tlačidlo. Poznámka sa zobrazí na stránke a pretrváva aj medzi vykreslením.

Ďalšie nové funkcie Astro

Pomocou týchto techník môžete spravovať stav vo vašej aplikácii Astro a zdieľať ho medzi komponentmi a rámcami. Ale Astro má mnoho ďalších užitočných funkcií, ako je zber údajov, miniifikácia HTML a paralelné vykresľovanie.