Rakendust Astro raamistikuga luues võib tekkida küsimus, kuidas hallata rakenduse olekut või jagada seda komponentide ja raamistike vahel. Nano Stores on Astro üks parimaid olekuhaldureid tänu sellele, et see töötab Reacti, Preacti, Svelte'i, Solidi, Liti, Angulari ja Vanilla JS-iga.

Siit saate teada, kuidas Astro projekti raames osariiki hallata. Järgige lihtsaid samme, et luua põhiline märkmete tegemise rakendus, mis kasutab oleku haldamiseks Nano Storesi ja jagab selle olekut komponendi React ja Solid.js vahel.

Mis on Astro?

Astro raamistik võimaldab teil luua veebirakendusi populaarsetele kasutajaliidese raamistikele, nagu React, Preact, Vue või Svelte. Raamistik kasutab a komponendipõhine arhitektuur, seega koosneb iga Astro leht mitmest komponendist.

Lehe laadimisaja kiirendamiseks minimeerib raamistik kliendipoolse JavaScripti kasutamise ja eelrenderdab selle asemel lehti serveris.

Astro loodi ideaalseks tööriistaks sisukesksete veebisaitide avaldamiseks. Mõelge ajaveebidele, sihtlehtedele, uudiste veebisaitidele ja muudele lehtedele, mis keskenduvad sisule, mitte interaktiivsusele. Interaktiivseks märgitud komponentide puhul saadab raamistik ainult minimaalse JavaScripti, mis on vajalik selle interaktiivsuse lubamiseks.

Paigaldamine ja seadistamine

Kui teil on juba Astro projekt käimas, jätke see jaotis vahele.

Kuid kui teil pole Astro projekti, peate selle looma. Ainus nõue selleks on omamine Node.js installitud teie kohalikku arendusmasinasse.

Uhiuue Astro projekti loomiseks käivitage käsuviip, cd kataloogi soovite oma projekti luua, seejärel käivitage järgmine käsk:

npm create astro@latest

Astro installimiseks vastake "y" ja andke oma projekti kausta nimele nimi. Võite viidata Astro'le ametlik seadistamisõpetus kui olete teel ummikusse jäänud.

Kui olete projekti loomise lõpetanud, järgige seda järgmise käsuga (see lisab projektile reageerimise):

npx astro add react

Lõpuks installige Nano Stores for React, käivitades järgmise käsu:

npm i nanostores @nanostores/react

Ikka oma terminalis sisestage cd projekti juurkausta ja käivitage rakendus mis tahes järgmistest käskudest (olenevalt sellest, millist neist kasutate):

npm run dev

Või:

yarn run dev

Või:

pnpm run dev

Minema http://localhost: 3000 oma veebibrauseris, et näha oma veebisaidi eelvaadet.

Kui teie Astro projekt on kõik seadistatud, on järgmine samm rakenduse andmete salvestamise loomine.

Märkmepoe loomine

Looge fail nimega noteStore.js faili sees /src teie rakenduse juurkataloogis. Kasutage selle faili sees aatom () funktsioon alates nanokauplused märkmete poe loomiseks tehke järgmist.

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

The lisada märkus() funktsioon võtab oma argumendiks märkme ja salvestab selle märkmesalve. See kasutab märkme salvestamisel levioperaatorit, et vältida andmete mutatsiooni. Laotuse operaator on a JavaScripti stenogramm objektide kopeerimiseks.

Märkmete tegemise rakenduse kasutajaliidese loomine

Kasutajaliides koosneb lihtsalt märkme kogumise sisendist ja nupust, millel klõpsamine lisab märkme poodi.

Sees src/komponendid kataloogi, looge uus fail nimega Märkus.AddButton.jsx. Järgmisena kleepige faili sisse järgmine kood:

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

See kood lisab märkuse komponendi olekusse, kui sisestate sisendisse. Seejärel, kui klõpsate nuppu, salvestab see märkme poodi. Samuti haarab see poest märkmed ja kuvab need järjestamata loendis. Selle lähenemisviisi korral kuvatakse märge lehel kohe pärast nupul klõpsamist Salvesta nuppu.

Nüüd sinu sees pages/index.astro faili, peate importima Märkus AddButton ja kasutage seda jaotises sildid:

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

"Welcome to Astro.">


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

Kui lähete nüüd tagasi oma brauserisse, leiate lehelt renderdatud sisestuselemendi ja nupu. Sisestage midagi sisendisse ja klõpsake nuppu Salvesta nuppu. Märkus kuvatakse lehel kohe ja see jääb lehele ka pärast brauseri värskendamist.

Oleku jagamine kahe raamistiku vahel

Oletame, et soovite jagada olekut Reacti ja Solid.js-i vahel. Esimene asi, mida peate tegema, on Solidi lisamine oma projektile, käivitades järgmise käsu:

npx astro add solid

Järgmisena lisage solid.js-i nanopoed, käivitades:

npm i nanostores @nanostores/solid

Kasutajaliidese loomiseks failis solid.js minge sisse src/komponendid kataloogi ja looge uus fail nimega Notes.js. Avage fail ja looge selle sees 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> 
 </>
 )
}

Selles failis impordite märkmed poest, sirvite kõik märkmed läbi ja kuvate need lehel.

Et näidata ülaltoodut Märge Solid.js-iga loodud komponent, avage lihtsalt oma pages/index.astro fail, import Märkus AddButton ja kasutage seda jaotises sildid:

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

"Welcome to Astro.">



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

Nüüd minge tagasi oma brauserisse, tippige midagi sisendisse ja klõpsake nuppu Salvesta nuppu. Märkus kuvatakse lehel ja püsib ka renderdamiste vahel.

Muud Astro uued funktsioonid

Neid tehnikaid kasutades saate hallata oma Astro rakenduse olekut ja jagada seda komponentide ja raamistike vahel. Kuid Astrol on palju muid käepäraseid funktsioone, nagu andmete kogumine, HTML-i minimeerimine ja paralleelne renderdamine.