كيفية إدارة الحالة في تطبيقات أسترو

القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا، قد نكسب عمولة تابعة. اقرأ أكثر.

عند إنشاء تطبيق باستخدام إطار عمل Astro، قد تتساءل عن كيفية إدارة حالة التطبيق أو مشاركتها بين المكونات والأطر. تعد Nano Stores واحدة من أفضل مديري الحالة لـ Astro، وذلك بفضل حقيقة أنها تعمل مع React وPreact وSvelte وSolid وLit وAngular وVanilla JS.

فيديو MUO لهذا اليوم قم بالتمرير للمتابعة مع المحتوى

تعرف على كيفية إدارة الحالة ضمن مشروع Astro. اتبع خطوات بسيطة لإنشاء تطبيق أساسي لتدوين الملاحظات يستخدم Nano Stores لإدارة الحالة ويشارك حالته بين مكون React وSolid.js.

---

---

ما هو استرو؟

يتيح لك إطار عمل Astro إنشاء تطبيقات ويب أعلى أطر عمل واجهة المستخدم الشائعة مثل React أو Preact أو Vue أو Svelte. يستخدم الإطار أ الهندسة المعمارية القائمة على المكونات لذا فإن كل صفحة في Astro تتكون من عدة مكونات.

لتسريع وقت تحميل الصفحة، يقلل إطار العمل من استخدام JavaScript من جانب العميل ويعرض الصفحات مسبقًا على الخادم بدلاً من ذلك.

تم تصميم Astro لتكون الأداة المثالية لنشر مواقع الويب التي تركز على المحتوى. فكر في المدونات والصفحات المقصودة والمواقع الإخبارية والصفحات الأخرى التي تركز على المحتوى بدلاً من التفاعل. بالنسبة للمكونات التي حددتها كتفاعلية، سيرسل إطار العمل فقط الحد الأدنى من JavaScript اللازم لتمكين هذا التفاعل.

التثبيت والإعداد

إذا كان لديك بالفعل مشروع Astro قيد التشغيل، فتخط هذا القسم.

لكن إذا لم يكن لديك مشروع Astro، فستحتاج إلى إنشاء واحد. الشرط الوحيد لهذا هو وجود Node.js المثبتة على جهاز التطوير المحلي الخاص بك.

---

---

لإنشاء مشروع Astro جديد تمامًا، قم بتشغيل موجه الأوامر الخاص بك، القرص المضغوط في الدليل الذي تريد إنشاء مشروعك فيه، ثم قم بتشغيل الأمر التالي:

 npm create astro@latest 

قم بالرد بـ 'y' لتثبيت Astro وتقديم اسم لاسم مجلد مشروعك. يمكنك الرجوع إلى 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" 
 
export const notes = atom([]) 
 
export function addNote(note) { 
  notes.set([...notes.get(), note]) 
  console.log("Added note: ", note.get()) 
} 

ال اضف ملاحظة() تأخذ الوظيفة ملاحظة كوسيطة لها وتخزنها داخل متجر الملاحظات. يستخدم عامل الانتشار عند تخزين الملاحظة لتجنب حدوث تغيير في البيانات. عامل الانتشار هو جافا سكريبت المختصرة لنسخ الكائنات.

إنشاء واجهة مستخدم لتطبيق تدوين الملاحظات

ستتألف واجهة المستخدم ببساطة من مدخل لجمع الملاحظة وزر يضيف الملاحظة إلى المتجر عند النقر عليه.

داخل src/components الدليل، قم بإنشاء ملف جديد باسم ملاحظةAddButton.jsx . ثم قم بلصق الكود التالي داخل الملف:

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

يضيف هذا الرمز الملاحظة إلى حالة المكون أثناء الكتابة في الإدخال. وبعد ذلك، عند النقر فوق الزر، يتم حفظ الملاحظة في المتجر. كما أنه يلتقط الملاحظات من المتجر ويعرضها داخل قائمة غير مرتبة. باستخدام هذا الأسلوب، ستظهر الملاحظة على الصفحة فورًا بعد النقر فوق الزر يحفظ زر.

مكان تحويل الشرائح إلى صور

الآن في الخاص بك الصفحات/index.astro الملف الذي تحتاج إلى استيراده ملاحظة AddButton واستخدامها داخل <الرئيسية> العلامات:

 import NoteAddButton from "../components/NoteAddButton.jsx" 
--- 
<Layout title="Welcome to Astro."> 
  <main> 
    <NoteAddButton client:load /> 
  </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. افتح الملف وقم بإنشاء مكون 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>  
    </> 
  ) 
} 

في هذا الملف، يمكنك استيراد الملاحظات من المتجر، واستعراض كل ملاحظة وعرضها على الصفحة.

لإظهار ما سبق ملحوظة المكون الذي تم إنشاؤه باستخدام Solid.js، ما عليك سوى الانتقال إلى ملف الصفحات/index.astro ملف، استيراد ملاحظة AddButton واستخدامها داخل <الرئيسية> العلامات:

 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 

عد الآن إلى متصفحك، واكتب شيئًا ما في الإدخال، ثم انقر فوق يحفظ زر. ستظهر الملاحظة على الصفحة وستستمر أيضًا بين عمليات العرض.

ميزات جديدة أخرى لـ Astro

باستخدام هذه التقنيات، يمكنك إدارة الحالة داخل تطبيق Astro الخاص بك ومشاركتها بين المكونات والأطر. لكن لدى Astro العديد من الميزات المفيدة الأخرى مثل جمع البيانات وتصغير HTML والعرض المتوازي.