Home-theater-designers
Pri vytváraní aplikácie s rámcom Astro sa možno pýtate, ako spravovať stav aplikácie alebo ho zdieľať medzi komponentmi a rámcami. Nano Stores je jedným z najlepších štátnych manažérov pre Astro, a to vďaka tomu, že pracuje s React, Preact, Svelte, Solid, Lit, Angular a Vanilla JS.
ako opustiť skupinový chat na imessageMUO Video dňa POKRAČUJTE V OBSAHU POKRAČOVANÍM
Naučte sa riadiť štát v rámci Astro projektu. Postupujte podľa jednoduchých krokov na vytvorenie základnej aplikácie na písanie poznámok, ktorá používa Nano Stores na správu stavu a zdieľa svoj stav medzi komponentmi React a Solid.js.
Čo je Astro?
Rámec Astro vám umožňuje vytvárať webové aplikácie nad populárnymi rámcami používateľského rozhrania, ako sú React, Preact, Vue alebo Svelte. Rámec používa a architektúra založená na komponentoch , takže každá stránka v Astro pozostáva z niekoľkých komponentov.
Aby sa urýchlil čas načítania stránky, rámec minimalizuje používanie JavaScriptu na strane klienta a namiesto toho predbežne vykresľuje stránky na serveri.
Astro bol navrhnutý ako ideálny nástroj na publikovanie obsahovo zameraných webových stránok. Zamyslite sa nad blogmi, vstupnými stránkami, spravodajskými webmi a inými stránkami, ktoré sa zameriavajú na obsah pred interaktivitou. Pre komponenty, ktoré označíte ako interaktívne, rámec odošle iba minimálny JavaScript potrebný na aktiváciu tejto interaktivity.
Inštalácia a nastavenie
Ak už máte spustený Astro projekt, preskočte túto časť.
Ak však nemáte projekt Astro, budete si ho musieť vytvoriť. Jedinou požiadavkou na to je mať Node.js nainštalovaný na vašom lokálnom vývojovom počítači.
Ak chcete vytvoriť úplne nový projekt Astro, spustite príkazový riadok, cd do adresára v ktorom chcete vytvoriť svoj projekt, potom spustite nasledujúci príkaz:
npm create astro@latest
Ak chcete nainštalovať Astro, odpovedzte „y“ a zadajte názov priečinka vášho projektu. Môžete sa obrátiť na Astro's oficiálny návod na nastavenie ak ste uviazli na ceste.
Po dokončení vytvárania projektu postupujte podľa nasledujúceho príkazu (tým pridáte do projektu React):
npx astro add react
Nakoniec nainštalujte Nano Stores for React spustením nasledujúceho príkazu:
npm i nanostores @nanostores/react
Stále na svojom termináli, cd do koreňového priečinka projektu a spustite aplikáciu ktorýmkoľvek z nasledujúcich príkazov (v závislosti od toho, ktorý z nich používate):
npm run dev
alebo:
yarn run dev
alebo:
pnpm run dev
Ísť do http://localhost:3000 vo webovom prehliadači, aby ste videli ukážku svojej webovej stránky.
Keď je váš projekt Astro nastavený, ďalším krokom je vytvorenie úložiska pre údaje aplikácie.
Vytvorenie obchodu s poznámkami
Vytvorte súbor s názvom noteStore.js súbor vnútri /src adresára v koreňovom adresári vašej aplikácie. Vo vnútri tohto súboru použite atóm() funkcia od nanoobchody na vytvorenie úložiska poznámok:
import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
The pridať poznámku() funkcia berie poznámku ako svoj argument a ukladá ju do úložiska poznámok. Pri ukladaní poznámky používa operátor spread, aby sa zabránilo mutácii údajov. Operátor nátierky je a JavaScript skratka na kopírovanie predmetov.
Vytvorenie používateľského rozhrania aplikácie na vytváranie poznámok
Používateľské rozhranie bude jednoducho pozostávať zo vstupu na zhromaždenie poznámky a tlačidla, ktoré po kliknutí pridá poznámku do obchodu.
Vnútri src/komponenty adresár, vytvorte nový súbor s názvom PoznámkaAddButton.jsx . Potom do súboru prilepte nasledujúci kód:
import {useState} from "react"
import {addNote, notes} from "../noteStore"
export default function NoteAdder() {
const [userNote, setUserNote] = useState('')
return(
<>
<label htmlFor="note">Add a note: </label>
<input type="text" name="note" id="note"
onChange={(event) => setUserNote(event.target.value)} />
<button onClick={() => addNote(userNote)}>Add</button>
<ul>
{
$notes.map((note, index) => {
<li key={index}>{note}</li>
})
}
</ul>
</>
)
}
Tento kód pridáva poznámku k stavu komponentu počas písania do vstupu. Potom, keď kliknete na tlačidlo, uloží sa poznámka do obchodu. Tiež si vezme poznámky z obchodu a zobrazí ich v neusporiadanom zozname. Pri tomto prístupe sa poznámka zobrazí na stránke ihneď po kliknutí na Uložiť tlačidlo.
Teraz vo vašom pages/index.astro súbor, musíte importovať PoznámkaAddButton a použiť ho v rámci
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
// Other code
Ak sa teraz vrátite späť do prehliadača, nájdete vstupný prvok a tlačidlo vykreslené na stránke. Zadajte niečo do vstupu a kliknite na Uložiť tlačidlo. Poznámka sa okamžite zobrazí na stránke a zostane na stránke aj po obnovení prehliadača.
Zdieľanie stavu medzi dvoma rámcami
Povedzme, že chcete zdieľať stav medzi React a Solid.js. Prvá vec, ktorú musíte urobiť, je pridať Solid do projektu spustením nasledujúceho príkazu:
npx astro add solid
Potom pridajte Nano Stores pre solid.js spustením:
npm i nanostores @nanostores/solid
Ak chcete vytvoriť používateľské rozhranie v súbore solid.js, prejdite do súboru src/komponenty adresár a vytvorte nový súbor s názvom Notes.js. Otvorte súbor a vytvorte v ňom komponent Notes:
import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"
export default function Notes() {
const $notes = useStore(notes)
return(
<>
<h1>My notes</h1>
<ul>
<For each={notes()} />
{(note) => <li>{note}</li>}
</For>
</ul>
</>
)
}
V tomto súbore importujete poznámky z obchodu, prechádzate cez každú z poznámok a zobrazujete ich na stránke.
Ak chcete ukázať vyššie uvedené Poznámka komponent vytvorený pomocou Solid.js, jednoducho prejdite na svoj pages/index.astro súbor, import PoznámkaAddButton a používať ho v rámci
import NodeAddButton from "../components/NoteAddButton.jsx"
import Nodes from "../components/Notes.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
// Other code
Teraz sa vráťte do prehliadača, zadajte niečo do vstupu a kliknite na Uložiť tlačidlo. Poznámka sa zobrazí na stránke a bude pretrvávať aj medzi vykreslením.
Ďalšie nové funkcie Astro
Pomocou týchto techník môžete spravovať stav vo svojej aplikácii Astro a zdieľať ho medzi komponentmi a rámcami. Ale Astro má mnoho ďalších užitočných funkcií, ako je zber údajov, miniifikácia HTML a paralelné vykresľovanie.