Kaj so composables in kako napišeš enega?

Question

Kaj so composables in kako napišeš enega?

Accepted Answer

**Composable** je ponovno uporabna funkcija, ki enkapsuira **stateful logiko** z uporabo Composition API. Po dogovoru se imenuje `useXxx` in vrača reaktivno stanje ter funkcije — s tem omogoči izmenjavo logike med komponentami brez mixinov ali ponavljanja. ## Pisanje composable-a ```js // composables/useCounter.js import { ref, computed } from "vue"; export function useCounter(initial = 0) { const count = ref(initial); // encapsulated reactive state const double = computed(() => count.value * 2); function increment() { count.value++; } function reset() { count.value = initial; } return { count, double, increment, reset }; // expose the API } ``` ## Uporaba v katerikoli komponenti ```vue ``` Vsaka komponenta, ki kliče `useCounter()`, dobi svoje **lastno izolirano** `count` — composables ustvarijo sveže stanje pri vsakem klicu, drugače kot skupna spremenljivka na nivoju modula. ## Realen primer: useFetch z lifecycle ```js import { ref, onUnmounted } from "vue"; export function useMousePosition() { const x = ref(0), y = ref(0); const update = (e) => { x.value = e.pageX; y.value = e.pageY; }; window.addEventListener("mousemove", update); // set up onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup! return { x, y }; } ``` Composables lahko uporabljajo lifecycle hooks, watchers in druge composables — in ključno je, da **enkapsuirajo svojo lastno čistko** (`onUnmounted`), zato se uporabniki ne morajo tega spominjati. ## Composables v primerjavi z mixini (stari način) ```text Mixins (Vue 2): merged into the component — unclear where properties came from, naming collisions between mixins, implicit dependencies Composables: explicit imports + return values — clear sources, no collisions, can be composed, fully typed in TypeScript ``` ## Zakaj je to pomembno Composables so *edini* idiomatski način za ekstrakcijo in ponovno uporabo stateful logike v Vue 3 — pridobivanje podatkov, upravljanje obrazcev, sledenje miški/drsenju, debouncing itd. Rešajo problem ponovno uporabe logike čisto (eksplicitno, brez trkov, komponljivo, TypeScript-prijazno), kjer so Vue 2 mixini padli. So glavni razlog, da ekipe sprejmejo Composition API: skupna logika postane preprosta, testabilna funkcija namesto razpršene ali podvojene kode.