Kun rakennat sovellusta Astro-kehyksen avulla, saatat miettiä, kuinka hallita sovelluksen tilaa tai jakaa se komponenttien ja kehysten välillä. Nano Stores on yksi Astron parhaista tilajohtajista, koska se toimii React-, Preact-, Svelte-, Solid-, Lit-, Angular- ja Vanilla JS: n kanssa.

Opi hallitsemaan tilaa Astro-projektissa. Seuraa yksinkertaisia ​​ohjeita luodaksesi perusmuistiinpanosovelluksen, joka käyttää Nano Storesia tilanhallintaan ja jakaa tilansa React- ja Solid.js-komponentin välillä.

Mikä on Astro?

Astro-kehyksen avulla voit luoda verkkosovelluksia suosittujen käyttöliittymäkehysten, kuten React, Preact, Vue tai Svelte, päälle. Kehys käyttää a komponenttipohjainen arkkitehtuuri, joten jokainen Astro-sivu koostuu useista osista.

Sivujen latausajan nopeuttamiseksi kehys minimoi asiakaspuolen JavaScriptin käytön ja esihahmontaa sen sijaan sivut palvelimella.

Astro on suunniteltu ihanteelliseksi työkaluksi sisältökeskeisten verkkosivustojen julkaisemiseen. Ajattele blogeja, aloitussivuja, uutissivustoja ja muita sivuja, jotka keskittyvät sisältöön vuorovaikutteisuuden sijaan. Vuorovaikutteisiksi merkitsemillesi komponenteille kehys lähettää vain vähimmäismäärän JavaScriptiä, joka tarvitaan vuorovaikutteisuuden mahdollistamiseen.

Asennus ja asetukset

Jos sinulla on jo Astro-projekti käynnissä, ohita tämä osio.

Mutta jos sinulla ei ole Astro-projektia, sinun on luotava sellainen. Ainoa vaatimus tälle on Node.js asennettuna paikalliseen kehityskoneeseen.

Luo upouusi Astro-projekti käynnistämällä komentokehote, cd hakemistoon haluat luoda projektin, ja suorita seuraava komento:

npm create astro@latest

Vastaa "y" asentaaksesi Astro ja anna nimi projektisi kansion nimelle. Voit viitata Astroon virallinen asennusohje jos olet jumissa matkalla.

Kun olet luonut projektin, seuraa sitä seuraavalla komennolla (tämä lisää React to the project):

npx astro add react

Asenna lopuksi Nano Stores for React suorittamalla seuraava komento:

npm i nanostores @nanostores/react

Aseta cd-levy edelleen päätteessäsi projektin juurikansioon ja käynnistä sovellus jollakin seuraavista komennoista (riippuen siitä, kumpaa niistä käytät):

npm run dev

Tai:

yarn run dev

Tai:

pnpm run dev

Mene http://localhost: 3000 selaimessasi nähdäksesi esikatselun verkkosivustostasi.

Kun Astro-projektisi on kaikki määritetty, seuraava vaihe on luoda sovellustietovarasto.

Muistikaupan luominen

Luo tiedosto nimeltä noteStore.js tiedosto sisällä /src sovelluksesi juurihakemistossa. Käytä tämän tiedoston sisällä atomi() toiminto alkaen nanokaupat muistiinpanokaupan luominen:

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

The lisätä huomautus() funktio ottaa huomautuksen argumentiksi ja tallentaa sen muistiinpanovarastoon. Se käyttää leviämisoperaattoria muistiinpanon tallentamiseen välttääkseen tietojen mutaation. Levitysoperaattori on a JavaScript lyhenne objektien kopioimiseen.

Muistiinpanosovelluksen käyttöliittymän luominen

Käyttöliittymä koostuu yksinkertaisesti syötteestä muistiinpanon keräämiseksi ja painikkeesta, jota napsauttamalla se lisää muistiinpanon kauppaan.

Sisällä src/komponentit hakemistoon, luo uusi tiedosto nimeltä HuomautusAddButton.jsx. Liitä seuraavaksi seuraava koodi tiedoston sisään:

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

Tämä koodi lisää huomautuksen komponentin tilaan, kun kirjoitat syötteeseen. Sitten kun napsautat painiketta, se tallentaa muistiinpanon kauppaan. Se myös nappaa muistiinpanot kaupasta ja näyttää ne järjestämättömässä luettelossa. Tällä lähestymistavalla huomautus tulee näkyviin sivulle heti, kun napsautat Tallentaa -painiketta.

Nyt sinun pages/index.astro tiedosto, sinun on tuotava HuomautusAddButton ja käytä sitä sisällä tunnisteet:

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

"Welcome to Astro.">


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

Jos palaat nyt takaisin selaimeesi, löydät syöttöelementin ja painikkeen sivulta. Kirjoita jotain syötteeseen ja napsauta Tallentaa -painiketta. Muistiinpano näkyy välittömästi sivulla ja säilyy sivulla myös selaimesi päivityksen jälkeen.

Jakamistila kahden kehyksen välillä

Oletetaan, että haluat jakaa tilan Reactin ja Solid.js: n välillä. Ensimmäinen asia, joka sinun on tehtävä, on lisätä Solid projektiisi suorittamalla seuraava komento:

npx astro add solid

Lisää seuraavaksi Nano Stores for solid.js suorittamalla:

npm i nanostores @nanostores/solid

Jos haluat luoda käyttöliittymän solid.js: ssä, mene sisään src/komponentit hakemistoon ja luo uusi tiedosto nimeltä Notes.js. Avaa tiedosto ja luo Notes-komponentti sen sisään:

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

Tässä tiedostossa tuot muistiinpanot kaupasta, käyt läpi jokaisen muistiinpanon ja näytät sen sivulla.

Yllä olevan näyttämiseksi Huomautus Solid.js: llä luotu komponentti, siirry omaan pages/index.astro tiedosto, tuonti HuomautusAddButton ja käytä sitä sisällä tunnisteet:

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

"Welcome to Astro.">



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

Palaa nyt selaimeesi, kirjoita jotain syötteeseen ja napsauta Tallentaa -painiketta. Huomautus näkyy sivulla ja säilyy myös renderöintien välillä.

Muita Astron uusia ominaisuuksia

Näiden tekniikoiden avulla voit hallita Astro-sovelluksesi tilaa ja jakaa sen komponenttien ja kehysten välillä. Mutta Astrolla on monia muita käteviä ominaisuuksia, kuten tiedonkeruu, HTML-pienennys ja rinnakkainen renderöinti.