Када правите апликацију са Астро оквиром, можда се питате како да управљате стањем апликације или га делите између компоненти и оквира. Нано Сторес је један од најбољих државних менаџера за Астро, захваљујући чињеници да ради са Реацт, Преацт, Свелте, Солид, Лит, Ангулар и Ванилла ЈС.

Научите како да управљате стањем у оквиру Астро пројекта. Пратите једноставне кораке да бисте креирали основну апликацију за бележење која користи Нано Сторес за управљање стањем и дели своје стање између Реацт и Солид.јс компоненте.

Шта је Астро?

Астро оквир вам омогућава да креирате веб апликације на врху популарних УИ оквира као што су Реацт, Преацт, Вуе или Свелте. Оквир користи а архитектура заснована на компонентама, тако да се свака страница у Астро-у састоји од неколико компоненти.

Да би убрзао време учитавања странице, оквир минимизира употребу ЈаваСцрипт-а на страни клијента и уместо тога унапред приказује странице на серверу.

Астро је дизајниран да буде идеалан алат за објављивање веб локација фокусираних на садржај. Размислите о блоговима, одредишним страницама, веб локацијама са вестима и другим страницама које се фокусирају на садржај уместо на интерактивност. За компоненте које означите као интерактивне, оквир ће послати само минимални ЈаваСцрипт потребан за омогућавање те интерактивности.

Инсталација и подешавање

Ако већ имате покренут и покренут Астро пројекат, прескочите овај одељак.

Али ако немате Астро пројекат, мораћете да га креирате. Једини услов за ово је имати Ноде.јс инсталиран на вашој локалној развојној машини.

Да бисте креирали потпуно нови Астро пројекат, покрените командну линију, цд у директоријум желите да креирате свој пројекат, а затим покрените следећу команду:

npm create astro@latest

Одговорите на "и" да бисте инсталирали Астро и дајте име за име фасцикле вашег пројекта. Можете се позвати на Астро званични водич за подешавање ако сте заглављени на путу.

Када завршите са креирањем пројекта, пратите то следећом командом (ово додаје Реацт пројекту):

npx astro add react

Коначно, инсталирајте Нано Сторес за Реацт тако што ћете покренути следећу команду:

npm i nanostores @nanostores/react

Још увек на свом терминалу, цд у основну фасциклу пројекта и покрените апликацију било којом од следећих команди (у зависности од тога коју од њих користите):

npm run dev

Или:

yarn run dev

Или:

pnpm run dev

Иди на http://localhost: 3000 у свом веб претраживачу да бисте видели преглед своје веб локације.

Пошто је ваш Астро пројекат потпуно подешен, следећи корак је креирање складишта за податке апликације.

Креирање продавнице бележака

Направите датотеку под називом нотеСторе.јс фајл унутар /src директоријум у корену ваше апликације. Унутар ове датотеке користите атом() функција од наносторес да направите продавницу белешки:

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

Тхе Додај белешку() функција узима белешку као свој аргумент и чува је у складишту за белешке. Користи оператор ширења када чува белешку да би се избегла мутација података. Оператор ширења је а ЈаваСцрипт стенограм за копирање објеката.

Креирање корисничког интерфејса апликације за бележење

УИ ће се једноставно састојати од улаза за прикупљање белешке и дугмета које, када се кликне, додаје белешку у продавницу.

Унутар срц/компоненте директоријум, креирајте нову датотеку под називом НотеАддБуттон.јск. Затим налепите следећи код унутар датотеке:

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

Овај код додаје белешку стању компоненте док куцате у унос. Затим, када кликнете на дугме, она чува белешку у продавници. Такође хвата белешке из продавнице и приказује их унутар неуређене листе. Са овим приступом, белешка ће се појавити на страници одмах након што кликнете на сачувати дугме.

Сада у вашем пагес/индек.астро датотеку, потребно је да увезете НотеАддБуттон и користите га у оквиру ознаке:

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

"Welcome to Astro.">


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

Ако се сада вратите у прегледач, наћи ћете елемент уноса и дугме приказане на страници. Унесите нешто у унос и кликните на сачувати дугме. Напомена ће се одмах појавити на страници и остаће на страници чак и након што освежите прегледач.

Дељење стања између два оквира

Рецимо да желите да поделите стање између Реацт-а и Солид.јс-а. Прва ствар коју треба да урадите је да додате Солид свом пројекту тако што ћете покренути следећу команду:

npx astro add solid

Затим додајте Нано Сторес за солид.јс тако што ћете покренути:

npm i nanostores @nanostores/solid

Да бисте креирали кориснички интерфејс у ​​солид.јс, уђите у срц/компоненте директоријум и креирајте нову датотеку под називом Нотес.јс. Отворите датотеку и креирајте компоненту Нотес унутар ње:

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

У овој датотеци увозите белешке из продавнице, пролазите кроз сваку белешку и приказујете је на страници.

Да покажем горе наведено Белешка компоненту креирану помоћу Солид.јс, једноставно идите на своју пагес/индек.астро датотека, увоз НотеАддБуттон и користите га у оквиру ознаке:

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

"Welcome to Astro.">



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

Сада се вратите у прегледач, унесите нешто у унос и кликните на сачувати дугме. Белешка ће се појавити на страници и такође ће постојати између рендеровања.

Остале нове карактеристике Астро-а

Користећи ове технике, можете управљати стањем унутар ваше Астро апликације и делити га између компоненти и оквира. Али Астро има многе друге корисне функције као што су прикупљање података, ХТМЛ минификација и паралелно приказивање.