إرجاع البيانات واستخدام $page.data
أعد البيانات من load، ثم احصل عليها في مكوّن الصفحة عبر الخاصية data
إرجاع البيانات واستخدام $page.data درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
خاصية data
تتلقى الصفحة خاصية data خاصة تُملأ من القيمة التي تُرجعها دالة التحميل.
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>آمن من ناحية الأنواع
مع TypeScript، ينشئ SvelteKit الأنواع من التحميل إلى data تلقائيًا.
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>خصائص متعددة
أرجع عدة مفاتيح، ثم أصل إلى كل منها عبر data.key.
التفاعلية
تتحدث خاصية data تفاعليًا عند التنقل، وتُعاد عملية تصيير الارتباطات.
مخزن $page
يمكنك الوصول إلى البيانات الوصفية من أي مكان عبر $page من $app/stores.
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>دمج بيانات التخطيط
تُدمج عملية تحميل التخطيط وعملية تحميل الصفحة في كائن بيانات واحد يمكن الوصول إليه في جميع أنحاء شجرة الصفحات.
خصائص مخصصة
يمكنك تمرير أي قيم قابلة للتسلسل: المصفوفات والكائنات والقيم البدائية وحتى الوعود، من أجل البث.
تجنّب الدوال
لا يمكن إجراء تسلسل للدوال؛ لذا أرجع البيانات فقط، وليس السلوك.
القيم الافتراضية
إذا لم تُرجع دالة التحميل شيئًا، تكون data هي {}.
التركيب مع المخازن
يمكنك ملء المخازن من بيانات التحميل عند التركيب لإتاحة الوصول العام إليها.
أخطاء الصفحة
إذا طرحت دالة التحميل استثناءً، تظهر أقرب +error.svelte، ولا يتم تعيين data.
تحقق سريع
كيف تصل إلى القيمة التي تُرجعها دالة التحميل داخل مكوّن؟
مراجعة
تلقَّ بيانات التحميل عبر الخاصية data. استخدم $page للوصول إلى معلومات عنوان URL والمعاملات والمسار.
الأسئلة الشائعة
هل درس «إرجاع البيانات واستخدام $page.data» مجاني؟
نعم — نص درس «إرجاع البيانات واستخدام $page.data» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «إرجاع البيانات واستخدام $page.data»؟
أعد البيانات من load، ثم احصل عليها في مكوّن الصفحة عبر الخاصية data تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «إرجاع البيانات واستخدام $page.data»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- دالة التحميل +page.js
- إرجاع البيانات واستخدام $page.data
- معالجة الأخطاء في load
- +page.server.js للمنطق الخاص بالخادم