Composables - Funções Reutilizáveis na Composition API

🎯 O que são Composables?

Composables são funções criadas para organizar e reutilizar a lógica de forma modular dentro da Composition API. Eles permitem que você extraia a lógica de componentes e compartilhe-a em diferentes partes da aplicação.

🔹 Como criar um Composable?

Um composable é uma função JavaScript que usa recursos da Composition API (como ref, reactive, computed, entre outros).

Exemplo de um composable simples:

// useContador.js
import { ref } from 'vue'

export function useContador() {
  const contador = ref(0)

  const incrementar = () => {
    contador.value++
  }

  const resetar = () => {
    contador.value = 0
  }

  return {
    contador,
    incrementar,
    resetar
  }
}

🔹 Como usar um Composable dentro de um componente?

Após criar o composable, você pode utilizá-lo em qualquer componente da aplicação. Basta importá-lo e chamá-lo dentro do setup() do componente.

Exemplo de componente usando o composable:

<template>
  
    Contador: {{ contador }}
     @click="incrementar">Incrementar
     @click="resetar">Resetar
  
template>

<script>
import { useContador } from './useContador'

export default {
  setup() {
    const { contador, incrementar, resetar } = useContador()

    return { contador, incrementar, resetar }
  }
}
script>

🔹 Por que usar Composables?

• Reusabilidade: Crie uma lógica em um único lugar e use-a em vários componentes.
• Legibilidade: Mantenha os componentes mais limpos e organizados.
• Manutenção: Facilite a manutenção e refatoração do código.
• Testabilidade: Teste composables de forma isolada.

🔹 Exemplo Avançado: Composables com watch e computed

Você pode utilizar hooks como watch e computed dentro dos composables para criar comportamentos mais complexos.

Exemplo com watch e computed:

// useDados.js
import { ref, computed, watch } from 'vue'

export function useDados() {
  const nome = ref('')
  const idade = ref(0)

  // Computed para calcular a idade em 10 anos
  const idadeFutura = computed(() => idade.value + 10)

  // Watch para monitorar mudanças no nome
  watch(nome, (novoNome, nomeAntigo) => {
    console.log(`Nome mudou de ${nomeAntigo} para ${novoNome}`)
  })

  return {
    nome,
    idade,
    idadeFutura
  }
}

Como usar esse composable dentro de um componente?

<template>
  
    Nome:  v-model="nome" />
    Idade:  v-model="idade" type="number" />
    Idade em 10 anos: {{ idadeFutura }}
  
template>

<script>
import { useDados } from './useDados'

export default {
  setup() {
    const { nome, idade, idadeFutura } = useDados()

    return { nome, idade, idadeFutura }
  }
}
script>

⚡ Composables e a Reatividade

Os composables podem ser usados para encapsular a lógica reativa. Você pode usar ref, reactive, computed, e watch para gerenciar dados dinâmicos e reativos dentro de funções reutilizáveis.

📝 Resumo Rápido

🚀 Dica Final

Composables são poderosos porque permitem abstrair lógica e compartilhá-la em toda a sua aplicação, sem necessidade de duplicar código ou depender de mixins, como acontecia nas versões anteriores do Vue.

Se quiser criar uma aplicação mais escalável e modular, sempre que tiver alguma lógica complexa ou que se repete em múltiplos componentes, pense em criar um composable para ela.