Vue Academy · درس

مصانع Composables وComposables ذات المعلمات

إنشاء مصانع Composables، وتحديد نطاق الحالة لكل مثيل، وتجنب حالة singleton المشتركة

الدرس 2 من 413 خطوة

مصانع Composables وComposables ذات المعلمات درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

دوال composable التي تستقبل معاملات

تعيد دالة composable عادية سلوكًا ثابتًا. أما دالة composable المعتمدة على معاملات فتستقبل وسائط لتخصيص ما تفعله، مثل عنوان URL أساسي أو خيارات أو قيم افتراضية، مما يتيح لدالة واحدة خدمة حالات متعددة.

دالة composable بسيطة تعتمد على معاملات

مرّروا الإعدادات على شكل وسائط. في هذا المثال يوفّر المستدعي عنوان URL، ولذلك يمكن استخدام useFetch واحد مع أي نقطة نهاية.

import { ref } from "vue"

export function useFetch(url) {
  const data = ref(null)
  fetch(url).then(r => r.json()).then(d => data.value = d)
  return { data }
}

استقبال كائن خيارات

عند وجود إعدادات كثيرة، استقبلوا كائن خيارات مع قيم افتراضية. يحافظ ذلك على وضوح موضع الاستدعاء ويجعل دالة composable مرنة.

export function useFetch(url, options = {}) {
  const { immediate = true, method = "GET" } = options
  const data = ref(null)
  function run() { /* fetch with method */ }
  if (immediate) run()
  return { data, run }
}

ما هو مصنع دوال composable؟

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

بناء دالة مصنع

تلتقط الدالة الخارجية الإعدادات المشتركة، مثل baseURL؛ أما الدالة الداخلية المعادة فهي دالة composable، وتكون الإعدادات مضمّنة فيها عبر الإغلاق.

export function createApi(baseURL) {
  return function useApi(path) {
    const data = ref(null)
    fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
    return { data }
  }
}

استخدام دالة مصنع

استدعوا دالة المصنع مرة واحدة (غالبًا في وحدة مشتركة) لإنتاج دالة composable مهيأة، ثم استوردوها واستخدموها في كل مكان.

// api.js
export const useApi = createApi("https://api.example.com")

// component
import { useApi } from "./api"
const { data } = useApi("/users")

حالة محددة لكل مثيلة

في كل مرة تستدعون فيها دالة composable، تكون المراجع التي تنشئها جديدة ومحلية لذلك الاستدعاء. يحصل مكوّنان يستدعيان useFetch على مرجعي data مستقلين، دون مشاركة غير مقصودة.

const a = useFetch("/posts")   // its own data ref
const b = useFetch("/comments") // a separate data ref

Singleton مشترك على مستوى الوحدة

أحيانًا تريدون مثيلة مشتركة واحدة. أعلنوا الحالة على مستوى الوحدة (خارج الدالة)، وستحتفظ بها دالة composable عبر الإغلاق؛ وبذلك يشترك جميع المستدعين في المراجع نفسها.

import { ref } from "vue"
const user = ref(null) // module-level, shared

export function useAuth() {
  function login(u) { user.value = u }
  return { user, login }
}

المثيلة الواحدة مقابل Singleton

الحالة داخل الدالة ← جديدة مع كل استدعاء (لكل مكوّن)، مثل النماذج وأدوات الجلب.
الحالة على مستوى الوحدة ← Singleton مشترك، مثل المستخدم الحالي والسمة والعلامات العامة للتطبيق.

اختاروا بناءً على ما إذا كانت البيانات محلية للمكوّن أم عامة.

دمج دالة المصنع مع Singleton

يمكن لدالة المصنع أيضًا إنتاج Singleton: أنشئوا الحالة المشتركة داخل استدعاء المصنع (الذي يُنفَّذ مرة واحدة)، واجعلوا دالة composable المعادة تحتفظ بها عبر الإغلاق.

export function createStore(initial) {
  const state = ref(initial) // created once per factory call
  return function useStore() {
    return { state }
  }
}
export const useCounter = createStore(0)

متى تستخدمون دالة مصنع؟

استخدموا دالة مصنع عندما تشترك عدة دوال composable في الإعدادات، مثل عنوان URL الأساسي أو الرؤوس أو مثيلة العميل، أو عندما تبنون مكتبة صغيرة وتريدون إتاحة تهيئتها للمستخدمين مرة واحدة. وإلا فستكون دالة composable المعتمدة على معاملات أبسط.

تحقق سريع

تحققوا من فهمكم لدوال مصانع composable وتحديد نطاقها.

أجب عليها في الدرس التفاعلي

مراجعة

لقد تعلمتم دوال مصانع composable وتحديد النطاق:

تستقبل دوال composable المعتمدة على معاملات وسائط أو خيارات لتخصيص السلوك.
دالة المصنع هي دالة تعيد دالة composable مهيأة مسبقًا (مع التقاط الإعدادات عبر الإغلاق).
تكون الحالة داخل الدالة خاصة بكل مثيلة، بينما تكون الحالة على مستوى الوحدة Singleton مشتركًا.
استخدموا الحالة الخاصة بكل مثيلة للبيانات المحلية للمكوّن، وSingleton لحالة التطبيق العامة، مثل المستخدم الحالي والسمة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «مصانع Composables وComposables ذات المعلمات» مجاني؟

نعم — نص درس «مصانع Composables وComposables ذات المعلمات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «مصانع Composables وComposables ذات المعلمات»؟

إنشاء مصانع Composables، وتحديد نطاق الحالة لكل مثيل، وتجنب حالة singleton المشتركة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «مصانع Composables وComposables ذات المعلمات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

التفاعلية المتقدمة: shallowRef وtriggerRef
مصانع Composables وComposables ذات المعلمات
آلات الحالة باستخدام XState في Vue
‏effectScope للتأثيرات المجمّعة

← العودة إلى Vue Academy