Ko gradite aplikacijo z ogrodjem Astro, se morda sprašujete, kako upravljati stanje aplikacije ali ga deliti med komponentami in ogrodji. Nano Stores je eden najboljših upravljavcev stanja za Astro, zahvaljujoč dejstvu, da deluje z React, Preact, Svelte, Solid, Lit, Angular in Vanilla JS.

Naučite se upravljati državo znotraj projekta Astro. Sledite preprostim korakom za ustvarjanje osnovne aplikacije za beleženje, ki uporablja Nano Stores za upravljanje stanja in deli svoje stanje med komponento React in Solid.js.

Kaj je Astro?

Ogrodje Astro vam omogoča ustvarjanje spletnih aplikacij poleg priljubljenih ogrodij uporabniškega vmesnika, kot so React, Preact, Vue ali Svelte. Okvir uporablja a arhitektura, ki temelji na komponentah, zato je vsaka stran v Astro sestavljena iz več komponent.

Da bi pospešil čas nalaganja strani, ogrodje minimizira uporabo JavaScripta na strani odjemalca in namesto tega predhodno upodablja strani na strežniku.

Astro je bil zasnovan kot idealno orodje za objavo spletnih mest, osredotočenih na vsebino. Pomislite na bloge, ciljne strani, spletna mesta z novicami in druge strani, ki se osredotočajo na vsebino namesto na interaktivnost. Za komponente, ki jih označite kot interaktivne, bo ogrodje poslalo samo minimalni JavaScript, potreben za omogočanje te interaktivnosti.

Namestitev in nastavitev

Če že imate projekt Astro v teku, preskočite ta razdelek.

Če pa nimate projekta Astro, ga boste morali ustvariti. Edina zahteva za to je imeti Node.js nameščen na vaš lokalni razvojni stroj.

Če želite ustvariti popolnoma nov projekt Astro, zaženite ukazni poziv, cd v imenik v katerem želite ustvariti svoj projekt, nato zaženite naslednji ukaz:

npm create astro@latest

Odgovorite z "y", če želite namestiti Astro, in vnesite ime za ime mape vašega projekta. Lahko se obrnete na Astro's uradna vadnica za nastavitev če se na poti zataknete.

Ko končate z ustvarjanjem projekta, temu sledite z naslednjim ukazom (to projektu doda React):

npx astro add react

Končno namestite Nano Stores za React tako, da zaženete naslednji ukaz:

npm i nanostores @nanostores/react

Še vedno na terminalu, pojdite v korensko mapo projekta in zaženite aplikacijo s katerim koli od naslednjih ukazov (odvisno od tega, katerega od njih uporabljate):

npm run dev

ali:

yarn run dev

ali:

pnpm run dev

Pojdi do http://localhost: 3000 v spletnem brskalniku, da si ogledate predogled vašega spletnega mesta.

Ko je vaš projekt Astro nastavljen, je naslednji korak ustvarjanje shrambe za podatke aplikacije.

Ustvarjanje Note Store

Ustvarite datoteko z imenom noteStore.js datoteka znotraj /src imenik v korenu vaše aplikacije. Znotraj te datoteke uporabite atom() funkcijo od nanotrgovine ustvariti trgovino z zapiski:

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

The Dodaj opombo() funkcija vzame opombo kot argument in jo shrani v shrambo opomb. Pri shranjevanju opombe uporablja operator spread, da se izogne ​​mutaciji podatkov. Operater širjenja je a JavaScript stenografija za kopiranje predmetov.

Ustvarjanje uporabniškega vmesnika aplikacije za beleženje

Uporabniški vmesnik bo preprosto sestavljen iz vnosa za zbiranje beležke in gumba, ki ob kliku doda beležko v trgovino.

Znotraj src/komponente ustvarite novo datoteko z imenom NoteAddButton.jsx. Nato v datoteko prilepite naslednjo kodo:

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

Ta koda doda opombo k stanju komponente, ko vnesete vnos. Nato, ko kliknete gumb, shrani zapisek v trgovino. Prav tako zgrabi zapiske iz trgovine in jih prikaže znotraj neurejenega seznama. S tem pristopom se bo zapisek prikazal na strani takoj po kliku Shrani gumb.

Zdaj v vašem pages/index.astro datoteko, morate uvoziti NoteAddButton in ga uporabite znotraj oznake:

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

"Welcome to Astro.">


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

Če se zdaj vrnete v brskalnik, boste na strani našli upodobljeni element vnosa in gumb. Vnesite nekaj v vnos in kliknite Shrani gumb. Zapisek se bo takoj prikazal na strani in bo na strani ostal tudi po osvežitvi brskalnika.

Deljenje stanja med dvema okviroma

Recimo, da želite deliti stanje med React in Solid.js. Prva stvar, ki jo morate storiti, je, da svojemu projektu dodate Solid tako, da zaženete naslednji ukaz:

npx astro add solid

Nato dodajte Nano Stores za solid.js tako, da zaženete:

npm i nanostores @nanostores/solid

Če želite ustvariti uporabniški vmesnik v solid.js, pojdite znotraj src/komponente in ustvarite novo datoteko z imenom Notes.js. Odprite datoteko in v njej ustvarite komponento 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 tej datoteki uvozite zapiske iz trgovine, pregledate vsak zapisek in ga prikažete na strani.

Za prikaz zgornjega Opomba komponento, ustvarjeno s Solid.js, preprosto pojdite na svoj pages/index.astro datoteka, uvoz NoteAddButton in ga uporabite znotraj oznake:

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

"Welcome to Astro.">



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

Zdaj se vrnite v brskalnik, vnesite nekaj v vnos in kliknite Shrani gumb. Opomba se bo prikazala na strani in vztrajala med upodobitvami.

Druge nove funkcije Astro

S temi tehnikami lahko upravljate stanje znotraj svoje aplikacije Astro in ga delite med komponentami in ogrodji. Toda Astro ima številne druge priročne funkcije, kot so zbiranje podatkov, pomanjševanje HTML in vzporedno upodabljanje.