0Pricing
Vue Academy · Aula

useCounter: um composable simples

ref de contagem, funções de incremento/decremento, redefinição e exposição apenas do necessário.

useCounter: um composable simples é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Criando useCounter

Vamos escrever uma função reutilizável pequena, mas completa: useCounter. Ela gerencia um número e expõe métodos para alterá-lo — uma primeira função reutilizável perfeita.

Aceitando um valor inicial

Forneça à função um parâmetro initial com um valor padrão para que os chamadores possam iniciar o contador em qualquer valor.

function useCounter(initial = 0) {
  // ...
}

A referência count interna

Internamente, crie uma ref para a contagem, inicializada com o valor inicial. Esse é o estado reativo pertencente à função reutilizável.

import { ref } from "vue";
function useCounter(initial = 0) {
  const count = ref(initial);
}

A função increment

Defina uma função que altere a referência. Como count é reativo, todos os consumidores são atualizados automaticamente.

function increment() {
  count.value++;
}

decrement e reset

Adicione as ações complementares. reset usa o initial original capturado no fechamento.

function decrement() {
  count.value--;
}
function reset() {
  count.value = initial;
}

Retornando a API

Retorne um objeto com o estado reativo e todos os métodos. Essa é a interface pública da função reutilizável.

return { count, increment, decrement, reset };

A função reutilizável completa

Juntando tudo, o resultado é compacto e reutilizável em qualquer componente.

import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

Usando em um componente

Chame-a em <script setup> e desestruture o resultado. O modelo pode usar count diretamente (desembrulhado automaticamente) e associar os métodos.

const { count, increment, decrement, reset } = useCounter(10);

No modelo

Associe os métodos aos botões. Cada clique altera a referência compartilhada e a interface é atualizada.

<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>

Instâncias independentes

Cada chamada a useCounter cria sua própria referência count. Dois componentes que a chamem terão contadores separados e isolados.

const a = useCounter();   // own count
const b = useCounter(100); // own count

Adicionando elementos computados

Você pode enriquecer a função reutilizável com estado derivado, como um valor computado isZero, retornado junto com os demais.

import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }

Verificação rápida

Por que cada chamada a useCounter recebe seu próprio estado?

Recapitulação

Você criou useCounter(initial): uma referência count interna, as funções increment/decrement/reset e um objeto retornado que expõe o estado reativo e os métodos. Cada chamada produz uma instância independente.

Perguntas Frequentes

A aula “useCounter: um composable simples” é grátis?

Sim — o texto completo de “useCounter: um composable simples” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “useCounter: um composable simples”?

ref de contagem, funções de incremento/decremento, redefinição e exposição apenas do necessário. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “useCounter: um composable simples”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O que caracteriza um bom composable
  2. useCounter: um composable simples
  3. useFetch: composable de dados assíncronos
  4. VueUse: a biblioteca de composables
← Voltar para Vue Academy