Kada gradite aplikaciju s okvirom Astro, možda se pitate kako upravljati stanjem aplikacije ili ga dijeliti između komponenti i okvira. Nano Stores jedan je od najboljih menadžera stanja za Astro, zahvaljujući činjenici da radi s React, Preact, Svelte, Solid, Lit, Angular i Vanilla JS.

Naučite upravljati stanjem unutar Astro projekta. Slijedite jednostavne korake za izradu osnovne aplikacije za bilježenje koja koristi Nano Stores za upravljanje stanjem i dijeli svoje stanje između React i Solid.js komponente.

Što je Astro?

Astro okvir vam omogućuje stvaranje web aplikacija povrh popularnih UI okvira kao što su React, Preact, Vue ili Svelte. Okvir koristi a arhitektura temeljena na komponentama, tako da se svaka stranica u Astrou sastoji od nekoliko komponenti.

Kako bi se ubrzalo vrijeme učitavanja stranice, okvir smanjuje upotrebu JavaScripta na strani klijenta i umjesto toga unaprijed renderira stranice na poslužitelju.

Astro je dizajniran da bude idealan alat za objavljivanje web stranica usmjerenih na sadržaj. Razmislite o blogovima, odredišnim stranicama, web stranicama s vijestima i drugim stranicama koje se fokusiraju na sadržaj umjesto na interaktivnost. Za komponente koje označite kao interaktivne, okvir će poslati samo minimalni JavaScript potreban za omogućavanje te interaktivnosti.

Instalacija i postavljanje

Ako već imate pokrenut Astro projekt, preskočite ovaj odjeljak.

Ali ako nemate Astro projekt, morat ćete ga izraditi. Jedini uvjet za to je imati Node.js instaliran na vašem lokalnom razvojnom stroju.

Da biste izradili potpuno novi Astro projekt, pokrenite naredbeni redak, cd u imenik u kojem želite izraditi svoj projekt, zatim pokrenite sljedeću naredbu:

npm create astro@latest

Odgovorite "y" da biste instalirali Astro i dali naziv za naziv mape vašeg projekta. Možete se obratiti Astro-u službeni vodič za postavljanje ako ste zapeli na putu.

Nakon što završite s izradom projekta, slijedite to sa sljedećom naredbom (ovo dodaje reakciju na projekt):

npx astro add react

Na kraju, instalirajte Nano Stores za React pokretanjem sljedeće naredbe:

npm i nanostores @nanostores/react

Još uvijek na svom terminalu, uđite u korijensku mapu projekta i pokrenite aplikaciju bilo kojom od sljedećih naredbi (ovisno koju od njih koristite):

npm run dev

Ili:

yarn run dev

Ili:

pnpm run dev

Ići http://localhost: 3000 u svom web pregledniku da biste vidjeli pregled svoje web stranice.

Nakon što je vaš Astro projekt spreman, sljedeći korak je stvaranje pohrane za podatke aplikacije.

Stvaranje trgovine bilješki

Stvorite datoteku pod nazivom noteStore.js datoteka unutar /src direktorij u korijenu vaše aplikacije. Unutar ove datoteke upotrijebite atom() funkcija iz nanoskladišta za stvaranje trgovine bilješki:

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

The Dodajte bilješke() funkcija uzima bilješku kao argument i pohranjuje je u pohranu bilješki. Koristi operator spread pri pohranjivanju bilješke kako bi se izbjegla mutacija podataka. Operator širenja je a JavaScript skraćenica za kopiranje objekata.

Stvaranje korisničkog sučelja aplikacije za bilježenje

UI će se jednostavno sastojati od unosa za prikupljanje bilješke i gumba koji, kada se klikne, dodaje bilješku u trgovinu.

Unutar src/komponente imenik, stvorite novu datoteku pod nazivom NoteAddButton.jsx. Zatim zalijepite sljedeći kod unutar datoteke:

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

Ovaj kod dodaje bilješku stanju komponente dok upisujete unos. Zatim, kada kliknete gumb, bilješka se sprema u trgovinu. Također preuzima bilješke iz trgovine i prikazuje ih unutar neuređenog popisa. S ovim pristupom, bilješka će se pojaviti na stranici odmah nakon klika na Uštedjeti dugme.

Sada u svom stranice/indeks.astro datoteku, morate uvesti NoteAddButton i koristiti ga unutar oznake:

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

"Welcome to Astro.">


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

Ako se sada vratite u svoj preglednik, pronaći ćete element unosa i gumb prikazan na stranici. Upišite nešto u unos i kliknite Uštedjeti dugme. Bilješka će se odmah pojaviti na stranici i ostat će na stranici čak i nakon što osvježite preglednik.

Dijeljenje stanja između dva okvira

Recimo da želite podijeliti stanje između Reacta i Solid.js-a. Prva stvar koju trebate učiniti je dodati Solid vašem projektu pokretanjem sljedeće naredbe:

npx astro add solid

Zatim dodajte Nano trgovine za solid.js pokretanjem:

npm i nanostores @nanostores/solid

Da biste stvorili korisničko sučelje u solid.js, uđite u src/komponente direktorij i stvorite novu datoteku pod nazivom Notes.js. Otvorite datoteku i stvorite komponentu Notes unutar nje:

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

U ovoj datoteci uvozite bilješke iz trgovine, prolazite kroz svaku bilješku i prikazujete je na stranici.

Da pokažem gore navedeno Bilješka komponentu stvorenu pomoću Solid.js, jednostavno idite na svoju stranice/indeks.astro datoteka, uvoz NoteAddButton i koristiti ga unutar oznake:

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

"Welcome to Astro.">



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

Sada se vratite u svoj preglednik, upišite nešto u unos i kliknite Uštedjeti dugme. Bilješka će se pojaviti na stranici i također će se zadržati između renderiranja.

Ostale nove značajke Astra

Pomoću ovih tehnika možete upravljati stanjem unutar vaše Astro aplikacije i dijeliti ga između komponenti i okvira. Ali Astro ima mnoge druge korisne značajke kao što su prikupljanje podataka, smanjivanje HTML-a i paralelizirano prikazivanje.