Când construiți o aplicație cu cadrul Astro, s-ar putea să vă întrebați cum să gestionați starea aplicației sau să o partajați între componente și cadre. Nano Stores este unul dintre cei mai buni manageri de stat pentru Astro, datorită faptului că funcționează cu React, Preact, Svelte, Solid, Lit, Angular și Vanilla JS.

Aflați cum să gestionați statul în cadrul unui proiect Astro. Urmați pași simpli pentru a crea o aplicație de bază pentru luarea de note care să folosească Nano Stores pentru gestionarea stării și să-și partajeze starea între o componentă React și Solid.js.

Ce este Astro?

Cadrul Astro vă permite să creați aplicații web pe deasupra cadrelor de interfață de utilizator populare, cum ar fi React, Preact, Vue sau Svelte. Cadrul folosește a arhitectura bazata pe componente, deci fiecare pagină din Astro constă din mai multe componente.

Pentru a accelera timpul de încărcare a paginii, cadrul minimizează utilizarea JavaScript la nivelul clientului și pre-rendează paginile pe server.

Astro a fost conceput pentru a fi instrumentul ideal pentru publicarea site-urilor web axate pe conținut. Gândiți-vă la bloguri, pagini de destinație, site-uri web de știri și alte pagini care se concentrează pe conținut în detrimentul interactivității. Pentru componentele pe care le marcați ca interactive, cadrul va trimite doar JavaScript-ul minim necesar pentru a activa acea interactivitate.

Instalare și configurare

Dacă aveți deja un proiect Astro în funcțiune, omiteți această secțiune.

Dar dacă nu aveți un proiect Astro, va trebui să creați unul. Singura cerință pentru aceasta este să ai Node.js instalat pe mașina dvs. de dezvoltare locală.

Pentru a crea un proiect Astro nou-nouț, lansați promptul de comandă, cd în director în care doriți să vă creați proiectul, apoi executați următoarea comandă:

npm create astro@latest

Răspundeți „y” pentru a instala Astro și furnizați un nume pentru numele folderului proiectului dumneavoastră. Vă puteți referi la Astro's tutorial oficial de configurare dacă ești blocat pe drum.

După ce ați terminat de creat proiectul, continuați cu următoarea comandă (aceasta adaugă React la proiect):

npx astro add react

În cele din urmă, instalați Nano Stores pentru React rulând următoarea comandă:

npm i nanostores @nanostores/react

Încă pe terminal, cd în folderul rădăcină al proiectului și porniți aplicația cu oricare dintre următoarele comenzi (în funcție de care dintre ele o utilizați):

npm run dev

Sau:

yarn run dev

Sau:

pnpm run dev

Mergi la http://localhost: 3000 în browserul dvs. web pentru a vedea o previzualizare a site-ului dvs. web.

Cu proiectul dvs. Astro configurat, următorul pas este să creați un magazin pentru datele aplicației.

Crearea magazinului de note

Creați un fișier numit noteStore.js dosar în interiorul /src directorul din rădăcina aplicației dvs. În interiorul acestui fișier, utilizați atom() functia de la nanomagazine pentru a crea un magazin de note:

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

The adauga notita() funcția preia o notă ca argument și o stochează în depozitul de note. Folosește operatorul de răspândire atunci când stochează nota pentru a evita mutația datelor. Operatorul de răspândire este a Stenografia JavaScript pentru copierea obiectelor.

Crearea interfeței de utilizare a aplicației de luare de note

Interfața de utilizare va consta pur și simplu dintr-o intrare pentru a colecta nota și un buton care, atunci când este făcut clic, adaugă nota în magazin.

În interiorul src/componente director, creați un fișier nou numit NotăAddButton.jsx. Apoi, lipiți următorul cod în interiorul fișierului:

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

Acest cod adaugă nota la starea componentei pe măsură ce tastați în intrare. Apoi, când faceți clic pe buton, acesta salvează nota în magazin. De asemenea, preia notele din magazin și le afișează într-o listă neordonată. Cu această abordare, nota va apărea pe pagină imediat după ce faceți clic pe Salvați buton.

Acum în tine pagini/index.astro fișier, trebuie să importați NotăAddButton și folosiți-l în cadrul Etichete:

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

"Welcome to Astro.">


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

Dacă vă întoarceți acum la browser, veți găsi elementul de intrare și butonul redate pe pagină. Tastați ceva în intrare și faceți clic pe Salvați buton. Nota va apărea imediat pe pagină și va persista pe pagină chiar și după ce vă reîmprospătați browserul.

Partajarea stării între două cadre

Să presupunem că doriți să partajați starea între React și Solid.js. Primul lucru pe care trebuie să-l faceți este să adăugați Solid la proiectul dvs. rulând următoarea comandă:

npx astro add solid

Apoi, adăugați Nano Stores pentru solid.js rulând:

npm i nanostores @nanostores/solid

Pentru a crea interfața de utilizare în solid.js, accesați src/componente director și creați un fișier nou numit Note.js. Deschideți fișierul și creați componenta Notes în interiorul acestuia:

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

În acest fișier, importați notele din magazin, parcurgeți fiecare dintre note și le afișați pe pagină.

Pentru a arăta cele de mai sus Notă componentă creată cu Solid.js, mergeți pur și simplu la dvs pagini/index.astro fișier, import NotăAddButton și folosiți-l în cadrul Etichete:

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

"Welcome to Astro.">



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

Acum reveniți la browser, introduceți ceva în intrare și faceți clic pe Salvați buton. Nota va apărea pe pagină și va persista și între randări.

Alte caracteristici noi ale Astro

Folosind aceste tehnici, puteți gestiona starea din interiorul aplicației dvs. Astro și o puteți partaja între componente și cadre. Dar Astro are multe alte caracteristici utile, cum ar fi colectarea de date, minimizarea HTML și randarea paralelizată.