Mutações e ações
Altere o estado com mutações e ações assíncronas.
Mutações e ações é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. 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 3 aulas no total.
Alterando o estado com segurança
No Vuex, você nunca modifica o estado diretamente a partir de um componente. Em vez disso, todas as alterações passam por mutações. Esse caminho único e explícito torna cada alteração de estado rastreável e fácil de depurar no Vue DevTools.
O que é uma mutação?
Uma mutação é uma função síncrona que recebe o estado atual e o modifica. As mutações são o único lugar onde o estado pode ser alterado.
mutations: {
increment(state) {
state.count++
}
}As mutações devem ser síncronas
As mutações devem ser executadas de forma síncrona. Se você colocar código assíncrono, como uma chamada de rede, dentro de uma mutação, o DevTools não conseguirá acompanhar quando o estado realmente mudou, interrompendo a depuração com viagem no tempo.
Confirmando uma mutação
Para executar uma mutação, você a confirma pelo nome a partir de um componente usando this.$store.commit.
methods: {
add() {
this.$store.commit("increment")
}
}Passando uma carga útil
As mutações aceitam um argumento adicional chamado carga útil, que permite passar dados para a alteração.
mutations: {
incrementBy(state, amount) {
state.count += amount
}
}
// commit with payload
this.$store.commit("incrementBy", 5)Cargas úteis no formato de objeto
Para vários valores, passe uma carga útil na forma de objeto. Isso é mais claro e flexível do que usar argumentos posicionais.
mutations: {
setUser(state, payload) {
state.user = { id: payload.id, name: payload.name }
}
}
this.$store.commit("setUser", { id: 1, name: "Ada" })O que é uma ação?
Uma ação lida com tarefas assíncronas e lógica de negócio. As ações não alteram o estado diretamente; em vez disso, confirmam mutações. Isso mantém o código assíncrono separado da mutação efetiva do estado.
Definindo uma ação
Uma ação recebe um objeto de contexto. A partir dele, você pode confirmar mutações com commit ou acessar o estado.
actions: {
async fetchUser(context, userId) {
const res = await fetch("/api/users/" + userId)
const data = await res.json()
context.commit("setUser", data)
}
}Desestruturando o contexto
É comum desestruturar commit diretamente do contexto para escrever de forma mais concisa.
actions: {
async loadTodos({ commit }) {
commit("setLoading", true)
const res = await fetch("/api/todos")
commit("setTodos", await res.json())
commit("setLoading", false)
}
}Disparando uma ação
Os componentes disparam ações com this.$store.dispatch, passando uma carga útil opcional. O disparo retorna uma promessa para ações assíncronas.
methods: {
async load() {
await this.$store.dispatch("loadTodos")
}
}O fluxo completo
O ciclo completo é: um componente dispara uma ação, a ação executa tarefas assíncronas e confirma uma mutação, e a mutação altera o estado. Em seguida, o estado reativo atualiza a interface automaticamente.
Verificação rápida
Avalie seus conhecimentos sobre mutações e ações.
Recapitulação
O estado só muda por meio de mutações, que são síncronas e confirmadas com commit. A lógica assíncrona fica nas ações, disparadas com dispatch, que confirmam mutações quando estão prontas. Ambas aceitam cargas úteis para transmitir dados. Em seguida, você adicionará acessores e dividirá o store em módulos.
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 “Mutações e ações” é grátis?
Sim — o texto completo de “Mutações e ações” é 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 3 aulas no total.
O que vou aprender em “Mutações e ações”?
Altere o estado com mutações e ações assíncronas. 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 3.
Quanto tempo leva a aula “Mutações e ações”?
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
- Fundamentos do Vuex
- Mutações e ações
- Getters e módulos