בעת בניית אפליקציה עם המסגרת של Astro, ייתכן שאתה תוהה כיצד לנהל את מצב היישום או לשתף אותו בין רכיבים ומסגרות. Nano Stores הוא אחד ממנהלי המדינה הטובים ביותר עבור Astro, הודות לעובדה שהוא עובד עם React, Preact, Svelte, Solid, Lit, Angular ו-Vanilla JS.

למד כיצד לנהל את המדינה בתוך פרויקט אסטרו. בצע שלבים פשוטים כדי ליצור אפליקציה בסיסית לרישום הערות המשתמשת ב-Nano Stores לניהול מצב ומשתפת את המצב שלה בין רכיב React ו-Solid.js.

מה זה אסטרו?

מסגרת Astro מאפשרת לך ליצור יישומי אינטרנט על גבי מסגרות ממשק משתמש פופולריות כמו React, Preact, Vue או Svelte. המסגרת משתמשת ב-a ארכיטקטורה מבוססת רכיבים, כך שכל עמוד באסטרו מורכב מכמה רכיבים.

כדי להאיץ את זמן טעינת הדפים, המסגרת ממזערת את השימוש ב-JavaScript בצד הלקוח ומציגה מראש דפים בשרת במקום זאת.

Astro תוכנן להיות הכלי האידיאלי לפרסום אתרים ממוקדי תוכן. חשבו על בלוגים, דפי נחיתה, אתרי חדשות ודפים אחרים המתמקדים בתוכן על פני אינטראקטיביות. עבור הרכיבים שאתה מסמן כאינטראקטיביים, המסגרת תשלח רק את ה-JavaScript המינימלי הדרוש כדי לאפשר את האינטראקטיביות הזו.

התקנה והגדרה

אם כבר יש לך פרויקט אסטרו פעיל, דלג על סעיף זה.

אבל אם אין לך פרויקט אסטרו, תצטרך ליצור אחד. הדרישה היחידה לכך היא שיש Node.js מותקן על מכונת הפיתוח המקומית שלך.

כדי ליצור פרויקט אסטרו חדש לגמרי, הפעל את שורת הפקודה שלך, CD לתוך הספרייה ברצונך ליצור את הפרויקט שלך, ואז הפעל את הפקודה הבאה:

npm create astro@latest

השב "y" כדי להתקין את Astro ולספק שם לשם התיקיה של הפרויקט שלך. אתה יכול להתייחס לאסטרו של הדרכה רשמית להגדרה אם אתה תקוע בדרך.

לאחר שתסיים ליצור את הפרויקט, בצע את הפקודה הבאה (זה מוסיף את React לפרויקט):

npx astro add react

לבסוף, התקן את Nano Stores for React על ידי הפעלת הפקודה הבאה:

npm i nanostores @nanostores/react

עדיין במסוף שלך, תקליטור לתוך תיקיית השורש של הפרויקט והפעל את היישום עם כל אחת מהפקודות הבאות (תלוי באיזו מהן אתה משתמש):

npm run dev

אוֹ:

yarn run dev

אוֹ:

pnpm run dev

לך ל http://localhost: 3000 בדפדפן האינטרנט שלך כדי לראות תצוגה מקדימה של האתר שלך.

כשפרויקט Astro שלך מוכן, השלב הבא הוא יצירת חנות לנתוני האפליקציה.

יצירת חנות הערות

צור קובץ בשם noteStore.js קובץ בתוך /src ספרייה בשורש היישום שלך. בתוך הקובץ הזה, השתמש ב- אָטוֹם() לתפקד מ חנויות ננו כדי ליצור חנות הערות:

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

ה להוסיף הערה() הפונקציה לוקחת הערה כארגומנט שלה ומאחסנת אותו בתוך מאגר ההערות. הוא משתמש באופרטור ההפצה בעת אחסון הפתק כדי למנוע מוטציה בנתונים. מפעיל ההפצה הוא א קיצור של JavaScript להעתקת חפצים.

יצירת ממשק המשתמש של אפליקציית רישום הערות

ממשק המשתמש פשוט יהיה מורכב מקלט לאיסוף הפתק ומכפתור שבלחיצה עליו מוסיף את הפתק לחנות.

בתוך ה src/רכיבים ספרייה, צור קובץ חדש בשם 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>
 </>
 )
}

קוד זה מוסיף את ההערה למצב הרכיב תוך כדי הקלדה בקלט. לאחר מכן, כאשר אתה לוחץ על הכפתור, זה שומר את הפתק בחנות. זה גם תופס את הפתקים מהחנות ומציג אותם בתוך רשימה לא מסודרת. בגישה זו, ההערה תופיע בעמוד מיד לאחר לחיצה על להציל לַחְצָן.

עכשיו אצלך pages/index.astro קובץ, עליך לייבא הערהAddButton ולהשתמש בו בתוך תגיות:

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/רכיבים ספרייה וצור קובץ חדש בשם Notes.js. פתח את הקובץ וצור בתוכו את רכיב Notes:

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, פשוט עבור אל שלך pages/index.astro קובץ, ייבוא הערהAddButton ולהשתמש בו בתוך תגיות:

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

"Welcome to Astro.">



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

כעת חזור לדפדפן שלך, הקלד משהו בקלט ולחץ על להציל לַחְצָן. ההערה תופיע בדף וגם תימשך בין רינדור.

תכונות חדשות אחרות של Astro

באמצעות טכניקות אלה, אתה יכול לנהל את המצב בתוך אפליקציית Astro שלך ולשתף אותו בין רכיבים ומסגרות. אבל לאסטרו יש תכונות שימושיות רבות אחרות כמו איסוף נתונים, צמצום HTML ועיבוד מקביל.