Vue Academy · درس

useCounter: دالة Composable بسيطة

مرجع count، ودوال الزيادة والنقصان، وإعادة الضبط، مع كشف ما يلزم فقط

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

بناء useCounter

سنكتب دالة مركبة صغيرة لكنها مكتملة: useCounter. فهي تدير رقمًا وتوفّر دوالًا لتغييره، مما يجعلها أول دالة مركبة مثالية للتعلّم.

قبول قيمة ابتدائية

امنح الدالة معاملًا باسم initial مع قيمة افتراضية، حتى يتمكن المستدعون من بدء العداد من أي قيمة.

function useCounter(initial = 0) {
  // ...
}

مرجع count الداخلي

أنشئ داخل الدالة ref للعدّ، وابدأه بالقيمة الابتدائية. هذه هي الحالة التفاعلية التي تملكها الدالة المركبة.

import { ref } from "vue";
function useCounter(initial = 0) {
  const count = ref(initial);
}

دالة increment

عرّف دالة تعدّل ref. وبما أن count تفاعلي، فسيُحدّث كل مستهلك تلقائيًا.

function increment() {
  count.value++;
}

الدالتان decrement وreset

أضف الإجرائين المكمّلين. تستخدم reset القيمة الأصلية initial التي التقطها الإغلاق.

function decrement() {
  count.value--;
}
function reset() {
  count.value = initial;
}

إرجاع واجهة API

أعِد كائنًا يضم الحالة التفاعلية وجميع الدوال. هذه هي الواجهة العامة للدالة المركبة.

return { count, increment, decrement, reset };

الدالة المركبة كاملةً

بعد جمع الأجزاء، يصبح كل شيء مختصرًا وقابلًا لإعادة الاستخدام في أي مكوّن.

import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

استخدامها في مكوّن

استدعها داخل <script setup> وفكّكها. ويمكن للقالب استخدام count مباشرةً (إذ تُفك تلقائيًا) وربط الدوال.

const { count, increment, decrement, reset } = useCounter(10);

في القالب

اربط الدوال بالأزرار. فكل نقرة تعدّل ref المشترك ويُحدّث العرض نفسه.

<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>

مثيلات مستقلة

ينشئ كل استدعاء للدالة useCounter مرجع count خاصًا به. لذلك يحصل مكوّنان يستدعيانها على عدادين منفصلين ومعزولين.

const a = useCounter();   // own count
const b = useCounter(100); // own count

إضافة قيم محسوبة

يمكنك إثراء الدالة المركبة بحالة مشتقة، مثل القيمة المحسوبة isZero، وإرجاعها إلى جانب بقية القيم.

import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }

اختبار سريع

لماذا يحصل كل استدعاء للدالة useCounter على حالته الخاصة؟

مراجعة

أنشأت useCounter(initial)، التي تتضمن مرجع count داخليًا، ودوال increment/decrement/reset، وكائنًا مُعادًا يوفّر الحالة التفاعلية بالإضافة إلى الدوال. وينتج عن كل استدعاء مثيل مستقل.

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

هل درس «useCounter: دالة Composable بسيطة» مجاني؟

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

ماذا ستتعلم في «useCounter: دالة Composable بسيطة»؟

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

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

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

كم من الوقت يستغرق درس «useCounter: دالة Composable بسيطة»؟

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

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

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

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

ما الذي يجعل Composable جيدًا؟
useCounter: دالة Composable بسيطة
useFetch: دالة Composable للبيانات غير المتزامنة
VueUse: مكتبة Composables

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