Κατά τη δημιουργία μιας εφαρμογής με το πλαίσιο Astro, ίσως αναρωτιέστε πώς να διαχειριστείτε την κατάσταση της εφαρμογής ή να την μοιραστείτε μεταξύ στοιχείων και πλαισίων. Το Nano Stores είναι ένας από τους καλύτερους διαχειριστές κατάστασης για το Astro, χάρη στο γεγονός ότι λειτουργεί με τα React, Preact, Svelte, Solid, Lit, Angular και Vanilla JS.

Μάθετε πώς να διαχειρίζεστε την κατάσταση σε ένα έργο Astro. Ακολουθήστε απλά βήματα για να δημιουργήσετε μια βασική εφαρμογή λήψης σημειώσεων που χρησιμοποιεί Nano Stores για διαχείριση κατάστασης και μοιράζεται την κατάστασή της μεταξύ ενός στοιχείου React και Solid.js.

Τι είναι το Astro;

Το πλαίσιο Astro σάς επιτρέπει να δημιουργείτε εφαρμογές Ιστού πάνω από δημοφιλή πλαίσια διεπαφής χρήστη όπως React, Preact, Vue ή Svelte. Το πλαίσιο χρησιμοποιεί α αρχιτεκτονική βασισμένη σε στοιχεία, επομένως κάθε σελίδα στο Astro αποτελείται από πολλά στοιχεία.

Για να επιταχυνθεί ο χρόνος φόρτωσης της σελίδας, το πλαίσιο ελαχιστοποιεί τη χρήση JavaScript από την πλευρά του πελάτη και αντ' αυτού προβάλλει σελίδες στον διακομιστή.

Το Astro σχεδιάστηκε για να είναι το ιδανικό εργαλείο για τη δημοσίευση ιστοσελίδων που εστιάζουν στο περιεχόμενο. Σκεφτείτε ιστολόγια, σελίδες προορισμού, ιστότοπους ειδήσεων και άλλες σελίδες που εστιάζουν στο περιεχόμενο και όχι στη διαδραστικότητα. Για τα στοιχεία που επισημαίνετε ως διαδραστικά, το πλαίσιο θα στείλει μόνο το ελάχιστο JavaScript που απαιτείται για να ενεργοποιηθεί αυτή η διαδραστικότητα.

Εγκατάσταση και Ρύθμιση

Εάν έχετε ήδη ένα έργο Astro σε λειτουργία, παραλείψτε αυτήν την ενότητα.

Αλλά αν δεν έχετε ένα έργο Astro, θα χρειαστεί να δημιουργήσετε ένα. Η μόνη προϋπόθεση για αυτό είναι να έχεις Node.js εγκατεστημένο στο μηχάνημα τοπικής ανάπτυξης.

Για να δημιουργήσετε ένα ολοκαίνουργιο έργο Astro, ξεκινήστε τη γραμμή εντολών, cd στον κατάλογο θέλετε να δημιουργήσετε το έργο σας και, στη συνέχεια, εκτελέστε την ακόλουθη εντολή:

npm create astro@latest

Απαντήστε "y" για να εγκαταστήσετε το Astro και δώστε ένα όνομα για το όνομα του φακέλου του έργου σας. Μπορείτε να ανατρέξετε στο Astro's επίσημο σεμινάριο εγκατάστασης αν είσαι κολλημένος στην πορεία.

Μόλις ολοκληρώσετε τη δημιουργία του έργου, ακολουθήστε το με την ακόλουθη εντολή (αυτό προσθέτει το React στο έργο):

npx astro add react

Τέλος, εγκαταστήστε το Nano Stores for React εκτελώντας την ακόλουθη εντολή:

npm i nanostores @nanostores/react

Ακόμα στο τερματικό σας, κάντε cd στον ριζικό φάκελο του έργου και ξεκινήστε την εφαρμογή με οποιαδήποτε από τις παρακάτω εντολές (ανάλογα με το ποια από αυτές χρησιμοποιείτε):

npm run dev

Ή:

yarn run dev

Ή:

pnpm run dev

Παω σε http://localhost: 3000 στο πρόγραμμα περιήγησής σας για να δείτε μια προεπισκόπηση του ιστότοπού σας.

Όταν το έργο σας Astro είναι έτοιμο, το επόμενο βήμα είναι να δημιουργήσετε ένα χώρο αποθήκευσης για τα δεδομένα της εφαρμογής.

Δημιουργία του Note Store

Δημιουργήστε ένα αρχείο με όνομα noteStore.js αρχείο μέσα στο /src κατάλογο στο root της εφαρμογής σας. Μέσα σε αυτό το αρχείο, χρησιμοποιήστε το άτομο() λειτουργία από νανοποθήκες για να δημιουργήσετε ένα κατάστημα σημειώσεων:

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

ο Προσθήκη σημείωσης() Η συνάρτηση παίρνει μια σημείωση ως όρισμα και την αποθηκεύει στο χώρο αποθήκευσης σημειώσεων. Χρησιμοποιεί τον τελεστή spread κατά την αποθήκευση της σημείωσης για να αποφύγει τη μετάλλαξη δεδομένων. Ο τελεστής διασποράς είναι α Συντομογραφία JavaScript για αντιγραφή αντικειμένων.

Δημιουργία της διεπαφής χρήστη της εφαρμογής λήψης σημειώσεων

Η διεπαφή χρήστη θα αποτελείται απλώς από μια είσοδο για τη συλλογή της σημείωσης και ένα κουμπί που, όταν κάνετε κλικ, προσθέτει τη σημείωση στο κατάστημα.

μεσα στην src/components κατάλογο, δημιουργήστε ένα νέο αρχείο με το όνομα NoteAddButton.jsx. Στη συνέχεια, επικολλήστε τον ακόλουθο κώδικα μέσα στο αρχείο:

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

Αυτός ο κωδικός προσθέτει τη σημείωση στην κατάσταση του στοιχείου καθώς πληκτρολογείτε στην είσοδο. Στη συνέχεια, όταν κάνετε κλικ στο κουμπί, αποθηκεύει τη σημείωση στο κατάστημα. Παίρνει επίσης τις σημειώσεις από το κατάστημα και τις εμφανίζει σε μια λίστα χωρίς παραγγελία. Με αυτήν την προσέγγιση, η σημείωση θα εμφανιστεί στη σελίδα αμέσως αφού κάνετε κλικ στο Αποθηκεύσετε κουμπί.

Τώρα στο δικό σου σελίδες/index.astro αρχείο, πρέπει να κάνετε εισαγωγή ΣημείωσηΠροσθήκη κουμπιού και χρησιμοποιήστε το μέσα στο ετικέτες:

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

"Welcome to Astro.">


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

Εάν επιστρέψετε τώρα στο πρόγραμμα περιήγησής σας, θα βρείτε το στοιχείο εισόδου και το κουμπί που αποδίδονται στη σελίδα. Πληκτρολογήστε κάτι στην είσοδο και κάντε κλικ στο Αποθηκεύσετε κουμπί. Η σημείωση θα εμφανιστεί αμέσως στη σελίδα και θα παραμείνει στη σελίδα ακόμα και αφού ανανεώσετε το πρόγραμμα περιήγησής σας.

Κοινή χρήση κατάστασης μεταξύ δύο πλαισίων

Ας υποθέσουμε ότι θέλετε να μοιραστείτε την κατάσταση μεταξύ React και Solid.js. Το πρώτο πράγμα που πρέπει να κάνετε είναι να προσθέσετε το Solid στο έργο σας εκτελώντας την ακόλουθη εντολή:

npx astro add solid

Στη συνέχεια, προσθέστε τα Nano Stores για το solid.js εκτελώντας:

npm i nanostores @nanostores/solid

Για να δημιουργήσετε τη διεπαφή χρήστη στο solid.js, μεταβείτε μέσα στο src/components καταλόγου και δημιουργήστε ένα νέο αρχείο με το όνομα Σημειώσεις.js. Ανοίξτε το αρχείο και δημιουργήστε το στοιχείο Σημειώσεις μέσα σε αυτό:

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

Σε αυτό το αρχείο, εισάγετε τις σημειώσεις από το κατάστημα, πραγματοποιείτε κύκλο σε κάθε μία από τις σημειώσεις και τις εμφανίζετε στη σελίδα.

Για να δείξουμε τα παραπάνω Σημείωση στοιχείο που δημιουργήθηκε με το Solid.js, απλώς μεταβείτε στο δικό σας σελίδες/index.astro αρχείο, εισαγωγή ΣημείωσηΠροσθήκη κουμπιού και χρησιμοποιήστε το μέσα στο ετικέτες:

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

"Welcome to Astro.">



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

Τώρα επιστρέψτε στο πρόγραμμα περιήγησής σας, πληκτρολογήστε κάτι στην είσοδο και κάντε κλικ στο Αποθηκεύσετε κουμπί. Η σημείωση θα εμφανίζεται στη σελίδα και επίσης θα παραμείνει μεταξύ των αποδόσεων.

Άλλα νέα χαρακτηριστικά του Astro

Χρησιμοποιώντας αυτές τις τεχνικές, μπορείτε να διαχειριστείτε την κατάσταση μέσα στην εφαρμογή σας Astro και να την μοιραστείτε μεταξύ στοιχείων και πλαισίων. Αλλά το Astro έχει πολλά άλλα χρήσιμα χαρακτηριστικά, όπως συλλογή δεδομένων, ελαχιστοποίηση HTML και παράλληλη απόδοση.