Composição de stores e acesso entre stores
Uso de uma store dentro de outra, padrões de composição de stores e como evitar dependências circulares.
Composição de stores e acesso entre stores é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 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.
Os repositórios podem usar outros repositórios
Os apps reais têm vários repositórios que precisam uns dos outros. Um repositório do carrinho pode precisar do repositório de autenticação para saber o usuário atual. O Pinia torna o acesso entre repositórios simples.
Chamando um repositório dentro de uma ação
Dentro de uma ação, basta chamar a composição do outro repositório. Como as ações são executadas depois que o Pinia está ativo, isso é seguro.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})A sintaxe do repositório de configuração
Além do objeto de opções, defineStore aceita uma função de configuração. Ela se parece com a configuração de um componente: declare referências reativas e valores computados e, em seguida, retorne-os.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})Estado como referências reativas
Em um repositório de configuração, cada ref ou reactive que você retorna se torna estado. Use ref para valores primitivos e reactive para objetos.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Acessadores como valores computados
Um computed retornado funciona como um acessador. Ele é armazenado em cache e é reativo, assim como os acessadores de um repositório de opções.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Ações como funções
Uma função retornada é uma ação. Ela pode ler e escrever diretamente nas referências reativas usando .value.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Retornando referências reativas e valores computados
A regra principal dos repositórios de configuração é: retorne tudo o que deseja expor. Tudo que não for retornado permanecerá privado no repositório.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Acesso entre repositórios em um repositório de configuração
Em um repositório de configuração, você pode chamar outro repositório no nível superior e usá-lo em valores computados ou ações.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Evitando dependências circulares
Se o repositório A importar o repositório B e B importar A, você poderá encontrar uma dependência circular. Evite chamar o outro repositório no nível superior do módulo; em vez disso, chame-o dentro da ação ou do acessador onde ele for necessário.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Por que as chamadas tardias ajudam
Chamar a composição do repositório dentro de uma função adia a resolução até o tempo de execução, depois que todos os módulos tiverem sido carregados. Isso interrompe o ciclo de importação que causa uma falha durante a avaliação do módulo.
Repositórios de opções versus de configuração
Os dois estilos têm a mesma capacidade. Escolha os repositórios de opções para uma estrutura declarativa familiar; escolha os repositórios de configuração quando quiser toda a flexibilidade da API de Composição, como observadores ou composições dentro do repositório.
Verificação rápida
Teste sua compreensão sobre a composição de módulos de estado.
Recapitulação
Você aprendeu a compor módulos de estado:
- Chame o composable de outro módulo de estado dentro de uma ação para acessar dados entre módulos.
- Os módulos de configuração usam uma função: refs são estado, computed são getters e funções são ações.
- Retorne tudo o que deseja disponibilizar.
- Chame os módulos de estado de forma tardia dentro das funções para evitar dependências circulares.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Composição de stores e acesso entre stores” é grátis?
Sim — o texto completo de “Composição de stores e acesso entre stores” é 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 “Composição de stores e acesso entre stores”?
Uso de uma store dentro de outra, padrões de composição de stores e como evitar dependências circulares. 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 3 de 4.
Quanto tempo leva a aula “Composição de stores e acesso entre stores”?
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
- Pinia vs Vuex: por que mudar
- defineStore: estado, getters e ações
- Composição de stores e acesso entre stores
- Persistência do Pinia e DevTools