Veidojot lietojumprogrammu ar Astro ietvaru, jums varētu rasties jautājums, kā pārvaldīt lietojumprogrammas stāvokli vai koplietot to starp komponentiem un ietvariem. Nano Stores ir viens no labākajiem Astro štata pārvaldniekiem, pateicoties tam, ka tas darbojas ar React, Preact, Svelte, Solid, Lit, Angular un Vanilla JS.

Uzziniet, kā pārvaldīt valsti Astro projekta ietvaros. Veiciet vienkāršas darbības, lai izveidotu pamata piezīmju veikšanas lietojumprogrammu, kas izmanto Nano Stores stāvokļa pārvaldībai un koplieto tās stāvokli starp React un Solid.js komponentiem.

Kas ir Astro?

Astro ietvars ļauj izveidot tīmekļa lietojumprogrammas papildus tādām populārām lietotāja saskarnes sistēmām kā React, Preact, Vue vai Svelte. Ietvars izmanto a uz komponentiem balstīta arhitektūra, tāpēc katra Astro lapa sastāv no vairākiem komponentiem.

Lai paātrinātu lapas ielādes laiku, sistēma samazina klienta puses JavaScript izmantošanu un tā vietā tiek priekšrenderētas lapas serverī.

Astro tika izstrādāts kā ideāls rīks uz saturu vērstu vietņu publicēšanai. Padomājiet par emuāriem, galvenajām lapām, ziņu vietnēm un citām lapām, kas koncentrējas uz saturu, nevis interaktivitāti. Komponentiem, kurus atzīmējat kā interaktīvus, ietvars nosūtīs tikai minimālo JavaScript, kas nepieciešams, lai iespējotu šo interaktivitāti.

Uzstādīšana un iestatīšana

Ja jums jau ir izveidots un darbojas Astro projekts, izlaidiet šo sadaļu.

Bet, ja jums nav Astro projekta, jums tas būs jāizveido. Vienīgā prasība šim nolūkam ir Node.js instalēta jūsu vietējā izstrādes mašīnā.

Lai izveidotu pavisam jaunu Astro projektu, palaidiet komandu uzvedni, CD direktorijā kurā vēlaties izveidot savu projektu, pēc tam palaidiet šādu komandu:

npm create astro@latest

Atbildiet ar “y”, lai instalētu Astro, un norādiet sava projekta mapes nosaukuma nosaukumu. Jūs varat atsaukties uz Astro's oficiālā iestatīšanas apmācība ja esat iestrēdzis ceļā.

Kad esat pabeidzis projekta izveidi, izpildiet to, izmantojot šo komandu (tas pievieno projektam React):

npx astro add react

Visbeidzot, instalējiet Nano Stores for React, izpildot šādu komandu:

npm i nanostores @nanostores/react

Joprojām terminālī ierakstiet kompaktdisku projekta saknes mapē un palaidiet lietojumprogrammu ar kādu no šīm komandām (atkarībā no tā, kuru no tām izmantojat):

npm run dev

Vai:

yarn run dev

Vai:

pnpm run dev

Iet uz http://localhost: 3000 savā tīmekļa pārlūkprogrammā, lai redzētu savas vietnes priekšskatījumu.

Kad jūsu Astro projekts ir iestatīts, nākamais solis ir izveidot lietojumprogrammas datu veikalu.

Piezīmju veikala izveide

Izveidojiet failu ar nosaukumu noteStore.js failu iekšpusē /src direktorijā jūsu lietojumprogrammas saknē. Šajā failā izmantojiet atoms () funkcija no nanoveikali lai izveidotu piezīmju veikalu:

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

The Pievienot piezīmi() funkcija pieņem piezīmi kā savu argumentu un saglabā to piezīmju krātuvē. Saglabājot piezīmi, tas izmanto izkliedes operatoru, lai izvairītos no datu mutācijas. Izkliedes operators ir a JavaScript saīsinājums objektu kopēšanai.

Piezīmju veikšanas lietotnes lietotāja saskarnes izveide

UI vienkārši sastāvēs no ievades piezīmes apkopošanai un pogas, uz kuras noklikšķinot, piezīme tiek pievienota veikalam.

Iekšpusē src/components direktorijā, izveidojiet jaunu failu ar nosaukumu PiezīmeAddButton.jsx. Pēc tam failā ielīmējiet šādu kodu:

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 kods pievieno piezīmi komponenta stāvoklim, kad rakstāt ievadi. Pēc tam, noklikšķinot uz pogas, piezīme tiek saglabāta veikalā. Tas arī satver piezīmes no veikala un parāda tās nesakārtotā sarakstā. Izmantojot šo pieeju, piezīme tiks parādīta lapā tūlīt pēc noklikšķināšanas uz Saglabāt pogu.

Tagad jūsu lapas/index.astro failu, jums ir jāimportē PiezīmePievienotButton un izmantojiet to sadaļā tagi:

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

"Welcome to Astro.">


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

Ja tagad atgriezīsities savā pārlūkprogrammā, lapā atradīsit ievades elementu un pogu. Ievadiet kaut ko ievadā un noklikšķiniet uz Saglabāt pogu. Piezīme nekavējoties parādīsies lapā un paliks lapā pat pēc pārlūkprogrammas atsvaidzināšanas.

Koplietošanas stāvoklis starp diviem ietvariem

Pieņemsim, ka vēlaties koplietot statusu starp React un Solid.js. Pirmā lieta, kas jums jādara, ir pievienot Solid savam projektam, izpildot šādu komandu:

npx astro add solid

Pēc tam pievienojiet Solid.js Nano Stores, izpildot:

npm i nanostores @nanostores/solid

Lai izveidotu lietotāja saskarni failā solid.js, atveriet src/components direktorijā un izveidojiet jaunu failu ar nosaukumu Notes.js. Atveriet failu un izveidojiet tajā komponentu 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> 
 </>
 )
}

Šajā failā jūs importējat piezīmes no veikala, pārskatāt katru no piezīmēm un parādāt tās lapā.

Lai parādītu iepriekš minēto Piezīme komponents, kas izveidots ar Solid.js, vienkārši dodieties uz savu lapas/index.astro fails, imports PiezīmePievienotButton un izmantojiet to sadaļā tagi:

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

"Welcome to Astro.">



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

Tagad atgriezieties savā pārlūkprogrammā, ievadiet kaut ko ievadā un noklikšķiniet uz Saglabāt pogu. Piezīme tiks parādīta lapā un saglabāsies arī starp renderēšanu.

Citas jaunas Astro funkcijas

Izmantojot šīs metodes, varat pārvaldīt statusu savā Astro lietojumprogrammā un koplietot to starp komponentiem un ietvariem. Taču Astro ir daudzas citas noderīgas funkcijas, piemēram, datu apkopošana, HTML samazināšana un paralēlā renderēšana.