Angular Academy · درس

القيم المحسوبة والأساليب

أضف حالة مشتقة وأساليب لتحديثها

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

ما بعد الحالة الخام

يعرض المتجر المفيد قيمًا مشتقة وسلوكًا. ويضيف SignalStore ذلك باستخدام withComputed لنماذج القراءة وwithMethods للإجراءات.

withComputed

تتلقى withComputed إشارات المتجر الحالية، وتعيد كائنًا من إشارات computed(). وتخزّن هذه الإشارات النتائج مؤقتًا وتتحدث تلقائيًا مثل أي قيمة محسوبة.

import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';

export const CartStore = signalStore(
  withState({ items: [] as Item[] }),
  withComputed(({ items }) => ({
    count: computed(() => items().length),
    total: computed(() => items().reduce((s, i) => s + i.price, 0))
  }))
);

قراءة القيم المحسوبة

تظهر الأعضاء المحسوبة في المتجر مثل الحالة تمامًا. اقرؤوا store.count() وstore.total() في القوالب؛ إذ تتحدث عند تغيّر items.

template: 'Items: {{ store.count() }} — {{ store.total() }}'

withMethods

تتلقى withMethods المتجر وتعيد طرائق مسماة. استخدموا patchState داخلها لتحديث الحالة بطريقة ثابتة.

import { withMethods, patchState } from '@ngrx/signals';

withMethods((store) => ({
  add(item: Item) {
    patchState(store, (s) => ({ items: [...s.items, item] }));
  },
  clear() {
    patchState(store, { items: [] });
  }
}))

الطرائق تقرأ الحالة أيضًا

يمكنكم داخل الطريقة قراءة الإشارات الحالية من وسيطة المتجر لاتخاذ القرارات قبل تطبيق التحديث.

withMethods((store) => ({
  toggle(id: string) {
    const exists = store.items().some(i => i.id === id);
    if (!exists) return;
    patchState(store, (s) => ({
      items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
    }));
  }
}))

يمكن للطرائق استخدام computed

بما أن withComputed تُنفَّذ قبل withMethods، يمكن للطرائق قراءة الأعضاء المحسوبة التي يعرِضها المتجر مسبقًا.

withMethods((store) => ({
  checkout() {
    if (store.total() === 0) return;
    // proceed...
  }
}))

حقن التبعيات

تُنفَّذ withMethods ضمن سياق حقن، لذلك يمكنكم استدعاء inject() داخلها للحصول على خدمات مثل HttpClient أو موجّه.

withMethods((store, http = inject(HttpClient)) => ({
  load() {
    http.get<Item[]>('/api/items')
      .subscribe(items => patchState(store, { items }));
  }
}))

ترتيب الميزات

تُركَّب الميزات من الأعلى إلى الأسفل. ضعوا withState أولًا، ثم withComputed (لقراءة الحالة)، ثم withMethods (لقراءة الحالة والقيم المحسوبة). ويؤدي عكس الترتيب إلى أخطاء في الأنواع.

التغليف

تستدعي المكوّنات store.add(item) أو تقرأ store.total(). ولا تستدعي patchState مباشرةً، مما يحافظ على منطق التغيير بالكامل داخل المتجر.

قيم محسوبة نقية وطرائق ذات تأثيرات جانبية

حافظوا على نقاء دوال withComputed (للاشتقاق فقط). وضعوا التأثيرات الجانبية، مثل استدعاءات HTTP أو التنقل، داخل withMethods.

اختبار الطرائق

SignalStores فئات قابلة للحقن. وفي الاختبارات، وفّروا المتجر عبر TestBed، واستدعوا طريقة، ثم تحقّقوا من إشارات الحالة والقيم المحسوبة بشكل متزامن.

const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);

اختبار سريع

تحققوا من فهمكم للقيم المحسوبة والطرائق.

مراجعة

عزّزتم SignalStore باستخدام withComputed لنماذج القراءة المخزّنة مؤقتًا، وwithMethods لإجراءات مغلّفة تستخدم patchState والخدمات المحقونة. ويضمن ترتيب الميزات قدرة كل طبقة على قراءة الطبقات التي تسبقها.

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

هل درس «القيم المحسوبة والأساليب» مجاني؟

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

ماذا ستتعلم في «القيم المحسوبة والأساليب»؟

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

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

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

كم من الوقت يستغرق درس «القيم المحسوبة والأساليب»؟

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

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

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

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

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