🚀 Capítulo 17: Composables - Sabedoria Jedi

🎯 Objetivo da Aula

Ao final desta aula, você saberá como criar os seus próprios Composables no Vue 3 para isolar a lógica do seu componente e reaproveitá-la em qualquer lugar do seu projeto (muito parecido com os Custom Hooks do React).

---

🏢 O Cenário Prático (Seu Desafio)

Várias telas da sua nave precisam de um cronômetro para contar o tempo de missão. Em vez de escrever o mesmo código de relógio em todas as telas, seu desafio é criar um Composable de Cronômetro e apenas chamá-lo onde precisar!

---

🧠 Fundamentos: A Teoria Traduzida

No Vue 3, graças à Composition API, podemos extrair a lógica reativa (variáveis ref, computed, funções) de dentro do componente e colocá-la em um arquivo JavaScript separado.

O que é um Composable?

É uma função que:

1. Começa com a palavra use (ex: useCronometro, useMouse).
2. Usa recursos do Vue (como ref, computed, onMounted) dentro dela.
3. Retorna os dados para o componente usar.

---

📖 Exemplo Guiado: Criando o Composable de Contador

Vamos criar um composable que gerencia a contagem de tempo.

🛠️ Passo a Passo (Criando o Composable)

1. Crie um arquivo chamado src/composables/useContador.js:

import { ref } from 'vue';
 
// Nosso hook personalizado
export function useContador(valorInicial = 0) {
  const contador = ref(valorInicial);
 
  const incrementar = () => contador.value++;
  const decrementar = () => contador.value--;
 
  // Retornamos o valor e as funções para o componente usar
  return { contador, incrementar, decrementar };
}

🛠️ Passo a Passo (Usando no Componente)

Abra o App.vue e use o seu novo composable:

<template>
  <div>
    <h1>⏱️ Tempo de Missão</h1>
    <p>Segundos: **{{ contador }}**</p>
    <button @click="incrementar">Adicionar Segundo</button>
  </div>
</template>
 
<script setup>
import { useContador } from './composables/useContador';
 
// Chamamos o nosso composable
const { contador, incrementar } = useContador(10); // Começa em 10
</script>

🕹️ Como Executar e Testar no VS Code

1. Salve os arquivos e veja o navegador.
2. O botão funcionará perfeitamente! A lógica está toda isolada no arquivo do composable.

---

🛠️ Prática Obrigatória 1

No arquivo useContador.js, adicione uma função chamada resetar que define o contador de volta para o valor inicial. Lembre-se de retornar essa função no final do arquivo.

---

🛠️ Prática Obrigatória 2

Use a função resetar no seu App.vue criando um botão “Resetar Tempo”.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No useContador.js:

const resetar = () => contador.value = valorInicial;
 
return { contador, incrementar, decrementar, resetar };

---

← Capitulo Anterior | Proximo Capitulo →