Amikor egy alkalmazást készít az Astro keretrendszerrel, felmerülhet a kérdés, hogyan kezelheti az alkalmazás állapotát, vagy hogyan oszthatja meg azt összetevők és keretrendszerek között. A Nano Stores az egyik legjobb állapotmenedzser az Astro számára, köszönhetően annak, hogy a React, Preact, Svelte, Solid, Lit, Angular és Vanilla JS szoftverekkel működik.

Ismerje meg, hogyan kezelheti az állapotot egy Astro projekten belül. Kövesse az egyszerű lépéseket egy alapvető jegyzetkészítő alkalmazás létrehozásához, amely a Nano Stores-t használja az állapotkezeléshez, és megosztja állapotát a React és a Solid.js összetevők között.

Mi az Astro?

Az Astro keretrendszer lehetővé teszi webalkalmazások létrehozását olyan népszerű UI keretrendszereken, mint a React, Preact, Vue vagy Svelte. A keretrendszer a komponens alapú architektúra, tehát az Astro minden oldala több összetevőből áll.

Az oldalbetöltési idő felgyorsítása érdekében a keretrendszer minimalizálja az ügyféloldali JavaScript használatát, és helyette előrendereli az oldalakat a szerveren.

Az Astro-t úgy tervezték, hogy ideális eszköz legyen a tartalomközpontú webhelyek közzétételéhez. Gondoljon a blogokra, a céloldalakra, a hírwebhelyekre és más oldalakra, amelyek a tartalomra összpontosítanak az interaktivitás helyett. Az interaktívként megjelölt összetevők esetében a keretrendszer csak az interaktivitás engedélyezéséhez szükséges minimális JavaScriptet küldi el.

Telepítés és beállítás

Ha már van egy Astro projektje és fut, hagyja ki ezt a részt.

De ha nincs Astro projektje, létre kell hoznia egyet. Ennek egyetlen feltétele a birtoklás Node.js telepítve a helyi fejlesztői gépre.

Vadonatúj Astro projekt létrehozásához indítsa el a parancssort, cd-t a könyvtárba ahol létre szeretné hozni a projektet, majd futtassa a következő parancsot:

npm create astro@latest

Válaszoljon „y”-re az Astro telepítéséhez, és adjon nevet projektje mappanevének. Az Astro-ra hivatkozhat hivatalos beállítási útmutató ha elakad az úton.

Ha elkészült a projekt létrehozásával, kövesse azt a következő paranccsal (ez hozzáadja a React to the projektet):

npx astro add react

Végül telepítse a Nano Stores for React alkalmazást a következő parancs futtatásával:

npm i nanostores @nanostores/react

Továbbra is a terminálon helyezze a cd-t a projekt gyökérmappájába, és indítsa el az alkalmazást a következő parancsok bármelyikével (attól függően, hogy melyiket használja):

npm run dev

Vagy:

yarn run dev

Vagy:

pnpm run dev

Menj http://localhost: 3000 webböngészőjében, hogy megtekinthesse webhelye előnézetét.

Ha az Astro projektje teljesen be van állítva, a következő lépés egy tároló létrehozása az alkalmazásadatok számára.

Jegyzettár létrehozása

Hozzon létre egy nevű fájlt noteStore.js fájl belsejében /src az alkalmazás gyökérkönyvtárában. Ebben a fájlban használja a atom() funkciótól nanoboltok jegyzettár létrehozásához:

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

A Megjegyzés hozzáadása() függvény argumentumként egy jegyzetet vesz fel, és a jegyzettárban tárolja. A feljegyzés tárolásakor a spread operátort használja, hogy elkerülje az adatmutációt. A terjedési operátor a JavaScript gyorsírás objektumok másolásához.

A Jegyzetkészítő alkalmazás felhasználói felületének létrehozása

A felhasználói felület egyszerűen egy bemenetből áll, amely összegyűjti a jegyzetet, és egy gombból, amelyre kattintva hozzáadja a jegyzetet az áruházhoz.

Benne src/components könyvtárba, hozzon létre egy új nevű fájlt MegjegyzésAddButton.jsx. Ezután illessze be a következő kódot a fájlba:

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

Ez a kód hozzáadja a megjegyzést a komponens állapotához, amikor beírja a bemenetet. Ezután a gombra kattintva elmenti a jegyzetet az áruházba. Ezenkívül megragadja a jegyzeteket az áruházból, és megjeleníti őket egy rendezetlen listán. Ezzel a megközelítéssel a jegyzet azonnal megjelenik az oldalon, miután a gombra kattintott Megment gomb.

Most a tiédben oldalak/index.astro fájlt, importálnia kell Megjegyzés AddButton és használja a címkék:

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

"Welcome to Astro.">


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

Ha most visszatér a böngészőhöz, az oldalon megjelenik a beviteli elem és a gomb. Írjon be valamit a bevitelbe, és kattintson a gombra Megment gomb. A megjegyzés azonnal megjelenik az oldalon, és a böngésző frissítése után is megmarad az oldalon.

Állapot megosztása két keret között

Tegyük fel, hogy meg szeretné osztani az állapotot a React és a Solid.js között. Az első dolog, amit meg kell tennie, a Solid hozzáadása a projekthez a következő parancs futtatásával:

npx astro add solid

Ezután adja hozzá a Solid.js Nano Store-ját a következő futtatással:

npm i nanostores @nanostores/solid

A UI solid.js fájlban való létrehozásához lépjen be a src/components könyvtárba, és hozzon létre egy új nevű fájlt Notes.js. Nyissa meg a fájlt, és hozza létre benne a Notes összetevőt:

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

Ebben a fájlban importálja a jegyzeteket az áruházból, végignézi az egyes jegyzeteket, és megjeleníti az oldalon.

A fentiek bemutatására jegyzet A Solid.js-szel létrehozott összetevő egyszerűen lépjen a saját oldalára oldalak/index.astro fájl, import Megjegyzés AddButton és használja a címkék:

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

"Welcome to Astro.">



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

Most lépjen vissza a böngészőbe, írjon be valamit a beviteli mezőbe, és kattintson a gombra Megment gomb. A megjegyzés megjelenik az oldalon, és a megjelenítések között is megmarad.

Az Astro egyéb újdonságai

Ezekkel a technikákkal kezelheti az állapotot az Astro alkalmazáson belül, és megoszthatja azt az összetevők és keretrendszerek között. De az Astro számos más hasznos funkcióval is rendelkezik, például adatgyűjtéssel, HTML-minimalizálással és párhuzamos megjelenítéssel.