Kurdami programą naudodami Astro sistemą, jums gali kilti klausimas, kaip valdyti programos būseną arba dalytis ja tarp komponentų ir struktūrų. „Nano Stores“ yra vienas geriausių „Astro“ būsenų valdytojų, nes jis dirba su „React“, „Preact“, „Svelte“, „Solid“, „Lit“, „Angular“ ir „Vanilla JS“.

Sužinokite, kaip valdyti valstybę Astro projekte. Atlikite paprastus veiksmus, kad sukurtumėte pagrindinę užrašų darymo programą, kuri naudoja „Nano Stores“ būsenai valdyti ir dalijasi savo būsena tarp „React“ ir „Solid.js“ komponentų.

Kas yra Astro?

„Astro“ sistema leidžia kurti žiniatinklio programas su populiariomis vartotojo sąsajos sistemomis, tokiomis kaip „React“, „Preact“, „Vue“ ar „Svelte“. Karkasas naudoja a komponentais pagrįsta architektūra, todėl kiekvienas Astro puslapis susideda iš kelių komponentų.

Siekdama pagreitinti puslapio įkėlimo laiką, sistema sumažina kliento pusės JavaScript naudojimą ir vietoj to puslapius pateikia iš anksto serveryje.

„Astro“ buvo sukurta kaip ideali priemonė skelbti svetaines, orientuotas į turinį. Pagalvokite apie tinklaraščius, nukreipimo puslapius, naujienų svetaines ir kitus puslapius, kuriuose daugiausia dėmesio skiriama turiniui, o ne interaktyvumui. Komponentams, kuriuos pažymėjote kaip interaktyvius, sistema siųs tik minimalų „JavaScript“, reikalingą šiam interaktyvumui įjungti.

Įdiegimas ir sąranka

Jei jau turite ir veikia Astro projektas, praleiskite šį skyrių.

Bet jei neturite Astro projekto, turėsite jį sukurti. Vienintelis reikalavimas tam yra turėti Node.js įdiegtas jūsų vietiniame kūrimo įrenginyje.

Norėdami sukurti visiškai naują Astro projektą, paleiskite komandų eilutę, cd į katalogą norite sukurti savo projektą, tada paleiskite šią komandą:

npm create astro@latest

Atsakykite „y“, kad įdiegtumėte „Astro“, ir nurodykite projekto aplanko pavadinimą. Galite kreiptis į Astro's oficiali sąrankos pamoka jei pakeliui įstrigote.

Baigę kurti projektą, atlikite tai naudodami šią komandą (tai prideda Reaguoti į projektą):

npx astro add react

Galiausiai įdiekite „Nano Stores for React“ vykdydami šią komandą:

npm i nanostores @nanostores/react

Vis dar savo terminale įdėkite kompaktinį diską į projekto šakninį aplanką ir paleiskite programą naudodami bet kurią iš šių komandų (atsižvelgiant į tai, kurią iš jų naudojate):

npm run dev

Arba:

yarn run dev

Arba:

pnpm run dev

Eiti į http://localhost: 3000 žiniatinklio naršyklėje, kad pamatytumėte savo svetainės peržiūrą.

Kai jūsų Astro projektas yra nustatytas, kitas žingsnis yra sukurti programos duomenų saugyklą.

Užrašų parduotuvės kūrimas

Sukurkite failą pavadinimu noteStore.js failas viduje /src programos šakniniame kataloge. Šiame faile naudokite atomas () funkcija nuo nanoparduotuvės Norėdami sukurti užrašų parduotuvę:

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

The Pridėti pastabą() funkcija priima pastabą kaip savo argumentą ir išsaugo ją pastabų saugykloje. Saugodamas pastabą, jis naudoja sklaidos operatorių, kad išvengtų duomenų mutacijos. Sklaidos operatorius yra a JavaScript trumpinys objektams kopijuoti.

Užrašų programos vartotojo sąsajos kūrimas

NS tiesiog susideda iš įvesties užrašui surinkti ir mygtuko, kurį spustelėjus, pastaba pridedama prie parduotuvės.

Viduje src/components kataloge, sukurkite naują failą pavadinimu PastabaAddButton.jsx. Tada į failą įklijuokite šį kodą:

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

Šis kodas prideda pastabą prie komponento būsenos, kai įvesite įvestį. Tada, spustelėjus mygtuką, užrašas išsaugomas parduotuvėje. Jis taip pat paima užrašus iš parduotuvės ir parodo juos netvarkingame sąraše. Taikant šį metodą, pastaba bus rodoma puslapyje iškart spustelėjus Sutaupyti mygtuką.

Dabar tavo puslapiai/index.astro failą, turite importuoti Pastaba AddButton ir naudokite jį viduje žymos:

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

"Welcome to Astro.">


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

Jei dabar grįšite į naršyklę, puslapyje rasite įvesties elementą ir mygtuką. Įveskite ką nors į įvestį ir spustelėkite Sutaupyti mygtuką. Pastaba iškart bus rodoma puslapyje ir išliks puslapyje net atnaujinus naršyklę.

Būsenos bendrinimas tarp dviejų rėmų

Tarkime, kad norite bendrinti būseną tarp „React“ ir „Solid.js“. Pirmas dalykas, kurį turite padaryti, yra pridėti Solid prie savo projekto vykdydami šią komandą:

npx astro add solid

Tada pridėkite solid.js „Nano Stores“ paleisdami:

npm i nanostores @nanostores/solid

Norėdami sukurti vartotojo sąsają solid.js, eikite į src/components katalogą ir sukurkite naują failą pavadinimu Notes.js. Atidarykite failą ir jame sukurkite pastabų komponentą:

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

Šiame faile galite importuoti užrašus iš parduotuvės, peržiūrėti kiekvieną užrašą ir pateikti juos puslapyje.

Norėdami parodyti aukščiau Pastaba komponentas, sukurtas naudojant Solid.js, tiesiog eikite į savo puslapiai/index.astro failas, importas Pastaba AddButton ir naudokite jį viduje žymos:

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

"Welcome to Astro.">



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

Dabar grįžkite į naršyklę, įveskite ką nors į įvestį ir spustelėkite Sutaupyti mygtuką. Pastaba bus rodoma puslapyje ir taip pat išliks tarp pateikimų.

Kitos naujos Astro funkcijos

Naudodami šiuos metodus galite valdyti būseną „Astro“ programoje ir dalytis ja tarp komponentų ir struktūrų. Tačiau Astro turi daug kitų patogių funkcijų, tokių kaip duomenų rinkimas, HTML sumažinimas ir lygiagretus atvaizdavimas.