Када правите апликацију са Астро оквиром, можда се питате како да управљате стањем апликације или га делите између компоненти и оквира. Нано Сторес је један од најбољих државних менаџера за Астро, захваљујући чињеници да ради са Реацт, Преацт, Свелте, Солид, Лит, Ангулар и Ванилла ЈС.
Научите како да управљате стањем у оквиру Астро пројекта. Пратите једноставне кораке да бисте креирали основну апликацију за бележење која користи Нано Сторес за управљање стањем и дели своје стање између Реацт и Солид.јс компоненте.
Преглед садржаја
Шта је Астро?
Астро оквир вам омогућава да креирате веб апликације на врху популарних УИ оквира као што су Реацт, Преацт, Вуе или Свелте. Оквир користи архитектуру засновану на компонентама, тако да се свака страница у Астро-у састоји од неколико компоненти.
Да би убрзао време учитавања странице, оквир минимизира употребу ЈаваСцрипт-а на страни клијента и уместо тога унапред приказује странице на серверу.
Астро је дизајниран да буде идеалан алат за објављивање веб локација фокусираних на садржај. Размислите о блоговима, одредишним страницама, веб локацијама са вестима и другим страницама које се фокусирају на садржај уместо на интерактивност. За компоненте које означите као интерактивне, оквир ће послати само минимални ЈаваСцрипт потребан за омогућавање те интерактивности.
Инсталација и подешавање
Ако већ имате покренут и покренут Астро пројекат, прескочите овај одељак.
Али ако немате Астро пројекат, мораћете да га креирате. Једини услов за ово је имати Ноде.јс инсталиран на вашој локалној развојној машини.
Да бисте креирали потпуно нови Астро пројекат, покрените командну линију, цд у директоријум у коме желите да креирате пројекат, а затим покрените следећу команду:
npm create astro@latest
Одговорите на „и“ да бисте инсталирали Астро и дајте име за име фасцикле вашег пројекта. Можете се позвати на Астро званични водич за подешавање ако сте заглављени на путу.
Када завршите са креирањем пројекта, пратите то следећом командом (ово додаје Реацт пројекту):
npx astro add react
Коначно, инсталирајте Нано Сторес за Реацт тако што ћете покренути следећу команду:
npm i nanostores @nanostores/react
Још увек на свом терминалу, цд у основну фасциклу пројекта и покрените апликацију било којом од следећих команди (у зависности од тога коју од њих користите):
npm run dev
Или:
yarn run dev
Или:
pnpm run dev
Иди на хттп://лоцалхост:3000 у свом веб претраживачу да бисте видели преглед своје веб локације.
Пошто је ваш Астро пројекат потпуно подешен, следећи корак је креирање складишта за податке апликације.
Креирање продавнице бележака
Креирајте датотеку под називом нотеСторе.јс унутар /срц директоријума у корену ваше апликације. Унутар ове датотеке користите функцију атом() из наносторес-а да бисте креирали складиште белешки:
import { atom } from "nanostores"export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
Функција аддНоте() узима белешку као свој аргумент и чува је у складишту за белешке. Користи оператор ширења када чува белешку да би се избегла мутација података. Оператор ширења је ЈаваСцрипт скраћеница за копирање објеката.
Креирање корисничког интерфејса апликације за бележење
УИ ће се једноставно састојати од улаза за прикупљање белешке и дугмета које, када се кликне, додаје белешку у продавницу.
Унутар директоријума срц/цомпонентс, направите нову датотеку под називом НотеАддБуттон.јск. Затим налепите следећи код унутар датотеке:
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>
</>
)
}
Овај код додаје белешку стању компоненте док куцате у унос. Затим, када кликнете на дугме, она чува белешку у продавници. Такође хвата белешке из продавнице и приказује их унутар неуређене листе. Са овим приступом, белешка ће се појавити на страници одмах након што кликнете на дугме Сачувај.
Сада у вашој датотеци пагес/индек.астро, морате да увезете НотеАддБуттон и користите га у оквиру <маин> ознака:
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
Ако се сада вратите у прегледач, наћи ћете елемент уноса и дугме приказане на страници. Унесите нешто у унос и кликните на дугме Сачувај. Напомена ће се одмах појавити на страници и остаће на страници чак и након што освежите прегледач.
Дељење стања између два оквира
Рецимо да желите да поделите стање између Реацт-а и Солид.јс-а. Прва ствар коју треба да урадите је да додате Солид свом пројекту тако што ћете покренути следећу команду:
npx astro add solid
Затим додајте Нано Сторес за солид.јс тако што ћете покренути:
npm i nanostores @nanostores/solid
Да бисте креирали кориснички интерфејс у солид.јс, идите у директоријум срц/цомпонентс и креирајте нову датотеку под називом Нотес.јс. Отворите датотеку и креирајте компоненту Нотес унутар ње:
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>
</>
)
}
У овој датотеци увозите белешке из продавнице, пролазите кроз сваку белешку и приказујете је на страници.
Да бисте приказали горњу компоненту Ноте креирану помоћу Солид.јс, једноставно идите на датотеку пагес/индек.астро, увезите НотеАддБуттон и користите је у оквиру <маин> ознака:
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>
Сада се вратите у свој претраживач, унесите нешто у унос и кликните на дугме Сачувај. Белешка ће се појавити на страници и такође ће постојати између рендеровања.
Друге нове карактеристике Астро-а
Користећи ове технике, можете управљати стањем унутар ваше Астро апликације и делити га између компоненти и оквира. Али Астро има многе друге корисне функције као што су прикупљање података, ХТМЛ минификација и паралелно приказивање.