วิธีสร้าง Composable Functions (Custom Hooks) ใน Vue 3

Composable Functions เป็นแพทเทิร์นที่ใช้ในการแชร์ Stateful Logic ระหว่าง Components ใน Vue 3

สร้าง Composable

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };
}

ใช้งาน Composable

<script setup>
import { useMouse } from '@/composables/useMouse';

const { x, y } = useMouse();
</script>

<template>
  Mouse position is at: {{ x }}, {{ y }}
</template>

สรุป

Composables ช่วยให้เราสกัด Logic ที่ใช้ซ้ำออกมาเป็นฟังก์ชัน ทำให้ Component ของเราโฟกัสแค่การแสดงผล