Composition API: i pattern che uso ogni giorno

Dopo due anni di Vue 3 ho smesso di cercare l’architettura perfetta. Mi bastano composables piccoli che fanno una cosa sola.

Un composable per una responsabilità

Estraggo la logica riutilizzabile in una funzione useX, con stato reattivo e cleanup.

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

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

  const update = (e: MouseEvent) => {
    x.value = e.pageX;
    y.value = e.pageY;
  };

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

  return { x, y };
}
</script>

Consumarlo è banale

Il componente resta leggibile: dichiara cosa gli serve, non come funziona.

<script setup lang="ts">
import { useMousePosition } from "@/composables/useMousePosition";

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

<template>
  <p>Cursore: {{ x }}, {{ y }}</p>
</template>

La regola d’oro: se un composable inizia a restituire più di 3-4 valori, probabilmente ne sto nascondendo due dentro uno. Lo spezzo.