📊 Capítulo 08: Composables Reutilizáveis

Especialização em Frontend com Vue.js

🗺️ Encapsulamento de Lógica de Estado com Composables

flowchart LR
    C1["useFetch('/api/produtos')\n(Retorna { data, error, isLoading })"]
    --> COMP1["Componente Catalogo.vue"]
    C1 --> COMP2["Componente DetalheProduto.vue"]
    C2["useLocalStorage('tema', 'dark')\n(Sincroniza ref com localStorage)"]
    --> COMP1

    style C1 fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style C2 fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style COMP1 fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style COMP2 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px

🎯 Slide 1: O Que é um Composable?

Uma função que aproveita a Composition API do Vue para encapsular e reutilizar lógica com estado (stateful logic).
Por convenção, sempre começa com o prefixo use... (ex.: useAuth, useCarrinho, useDebounce).

🎯 Slide 2: Exemplo Canônico: `useLocalStorage`

export function useLocalStorage<T>(chave: string, valorInicial: T) {
  const salvo = localStorage.getItem(chave);
  const dado = ref<T>(salvo ? JSON.parse(salvo) : valorInicial);

  watch(dado, (novo) => {
    localStorage.setItem(chave, JSON.stringify(novo));
  }, { deep: true });

  return dado;
}

🎯 Slide 3: O Ecossistema VueUse

VueUse: A coleção padrão de mais de 200 composables essenciais para a comunidade Vue (sensores de mouse, geolocalização, websockets, animações e muito mais).