0Pricing
Vue Academy · Aula

Fábricas de composables e composables parametrizados

Criação de fábricas de composables, escopo do estado por instância e prevenção de estado singleton compartilhado.

Fábricas de composables e composables parametrizados é 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.

Componíveis que recebem parâmetros

Um componível simples retorna um comportamento fixo. Um componível parametrizado aceita argumentos para personalizar seu funcionamento — uma URL base, opções, valores padrão — fazendo uma única função atender a vários casos.

Um componível parametrizado simples

Passe a configuração como argumentos. Aqui, a URL é fornecida por quem chama a função, portanto um único useFetch funciona com qualquer endpoint.

import { ref } from "vue"

export function useFetch(url) {
  const data = ref(null)
  fetch(url).then(r => r.json()).then(d => data.value = d)
  return { data }
}

Aceitando um objeto de opções

Quando há muitas opções, aceite um objeto de opções com valores padrão. Isso mantém o local da chamada legível e o componível flexível.

export function useFetch(url, options = {}) {
  const { immediate = true, method = "GET" } = options
  const data = ref(null)
  function run() { /* fetch with method */ }
  if (immediate) run()
  return { data, run }
}

O que é uma fábrica de componíveis

Uma fábrica vai um passo além: é uma função que retorna um componível, pré-configurado com configurações compartilhadas. Você configura uma vez e obtém um componível personalizado para usar em vários componentes.

Construindo uma fábrica

A função externa captura a configuração compartilhada (por exemplo, baseURL); a função interna retornada é o componível, com a configuração incorporada por meio de um fechamento.

export function createApi(baseURL) {
  return function useApi(path) {
    const data = ref(null)
    fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
    return { data }
  }
}

Usando uma fábrica

Chame a fábrica uma vez (geralmente em um módulo compartilhado) para produzir um componível configurado; depois, importe-o e use-o em qualquer lugar.

// api.js
export const useApi = createApi("https://api.example.com")

// component
import { useApi } from "./api"
const { data } = useApi("/users")

Estado isolado por instância

Cada vez que você chama um componível, as refs que ele cria são novas e locais àquela chamada. Dois componentes que chamam useFetch obtêm refs data independentes — sem compartilhamento acidental.

const a = useFetch("/posts")   // its own data ref
const b = useFetch("/comments") // a separate data ref

Instância única compartilhada no nível do módulo

Às vezes, você WANT ter uma única instância compartilhada. Declare o estado no nível do módulo (fora da função), e o componível manterá uma referência a ele — todas as chamadas compartilharão as mesmas refs.

import { ref } from "vue"
const user = ref(null) // module-level, shared

export function useAuth() {
  function login(u) { user.value = u }
  return { user, login }
}

Por instância versus instância única

  • Estado dentro da função → um novo estado a cada chamada (por componente) — formulários, buscadores.
  • Estado no nível do módulo → instância única compartilhada — usuário atual, tema, sinalizadores de toda a aplicação.

Escolha com base em os dados serem locais ao componente ou globais.

Combinando fábrica e instância única

Uma fábrica também pode produzir uma instância única: crie o estado compartilhado dentro da chamada da fábrica (que é executada uma vez) e faça o componível retornado manter uma referência a ele.

export function createStore(initial) {
  const state = ref(initial) // created once per factory call
  return function useStore() {
    return { state }
  }
}
export const useCounter = createStore(0)

Quando usar uma fábrica

Utilize uma fábrica quando vários componíveis compartilharem configurações (URL base, cabeçalhos, instância do cliente) ou quando você criar uma pequena biblioteca e quiser que os consumidores configurem tudo uma vez. Caso contrário, um componível parametrizado é mais simples.

Verificação rápida

Verifique sua compreensão sobre fábricas de componíveis e escopo.

Recapitulação

Você aprendeu sobre fábricas de componíveis e escopo:

  • Componíveis parametrizados aceitam argumentos ou opções para personalizar o comportamento.
  • Uma fábrica é uma função que retorna um componível pré-configurado (a configuração é capturada por meio de um fechamento).
  • O estado dentro da função é específico de cada instância; o estado no nível do módulo é uma instância única compartilhada.
  • Utilize estados por instância para dados locais ao componente e uma instância única para o estado de toda a aplicação (usuário atual, tema).

Perguntas Frequentes

A aula “Fábricas de composables e composables parametrizados” é grátis?

Sim — o texto completo de “Fábricas de composables e composables parametrizados” é 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 “Fábricas de composables e composables parametrizados”?

Criação de fábricas de composables, escopo do estado por instância e prevenção de estado singleton compartilhado. 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 “Fábricas de composables e composables parametrizados”?

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. Reatividade avançada: shallowRef e triggerRef
  2. Fábricas de composables e composables parametrizados
  3. Máquinas de estado com XState no Vue
  4. effectScope para efeitos agrupados
← Voltar para Vue Academy