Composables: دوال التركيب القابلة لإعادة الاستخدام

ما هي Composables؟

Composable أساسية

// useCounter.ts
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 };
}

// Usage in any component:
const { count, increment } = useCounter(10);

Composable مع خطافات دورة الحياة

// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';

export function useOnlineStatus() {
  const isOnline = ref(navigator.onLine);

  const update = () => (isOnline.value = navigator.onLine);

  onMounted(() => {
    window.addEventListener('online', update);
    window.addEventListener('offline', update);
  });
  onUnmounted(() => {
    window.removeEventListener('online', update);
    window.removeEventListener('offline', update);
  });

  return { isOnline };
}

Composable غير متزامنة (useFetch)

// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  const error = ref<string | null>(null);

  watchEffect(async (onCleanup) => {
    const controller = new AbortController();
    onCleanup(() => controller.abort());
    loading.value = true;
    error.value = null;
    try {
      const res = await fetch(unref(url), { signal: controller.signal });
      data.value = await res.json();
    } catch (e: any) {
      if (e.name !== 'AbortError') error.value = e.message;
    } finally { loading.value = false; }
  });

  return { data, loading, error };
}

قبول المراجع كوسائط

import type { MaybeRef } from 'vue';
import { unref } from 'vue';

function useDouble(num: MaybeRef<number>) {
  return computed(() => unref(num) * 2);
}

Composables مقابل Mixins

مشاركة الحالة بين المكوّنات

// Shared state (module-level):
const sharedCount = ref(0);

export function useSharedCounter() {
  // All callers share the same sharedCount
  return { count: sharedCount, increment: () => sharedCount.value++ };
}

مكتبات Composables

اختبار Composables

اصطلاحات تسمية Composables

تنظيم Composables

تحقّق سريعًا

مراجعة: Vue Composables