Vue Academy · Aula

Getters e módulos

Calcule o estado derivado e organize a store em módulos.

Getters e módulos é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 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.

Estado computado com acessores

Às vezes, você precisa de um estado derivado, como uma lista filtrada ou uma contagem. Um acessor é o equivalente, no store, a uma propriedade computada: ele deriva um valor do estado e armazena o resultado em cache até que suas dependências mudem.

Definindo um acessor

Um acessor é uma função que recebe o estado e retorna um valor derivado.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

Acessores usando outros acessores

Um acessor recebe um segundo argumento com todos os outros acessores, permitindo compô-los.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

Acessando acessores

Leia os acessores por meio de this.$store.getters em uma propriedade computada.

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

Acessores no estilo de método

Retorne uma função a partir de um acessor para passar argumentos. Observe que os acessores no estilo de método não são armazenados em cache e são executados a cada chamada.

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

O auxiliar mapGetters

Assim como mapState, o auxiliar mapGetters transforma acessores em propriedades computadas automaticamente.

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

Por que dividir em módulos?

Um único store grande se torna difícil de manter. O Vuex permite dividir o store em módulos, cada um com seu próprio estado, mutações, ações e acessores, mantendo a lógica relacionada reunida.

Definindo um módulo

Um módulo é simplesmente um objeto com as mesmas opções de um store. Registre os módulos na chave modules.

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

Registrando módulos

Combine os módulos no store raiz, na chave modules. Cada chave se torna o nome do módulo.

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

Definindo espaços de nomes nos módulos

Defina namespaced: true para que um módulo tenha seu próprio escopo. Isso evita conflitos de nomes entre módulos e torna a estrutura explícita.

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

Acessando módulos com espaços de nomes

Com os espaços de nomes definidos, prefixe o nome do módulo ao confirmar mutações, disparar ações ou ler acessores.

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

Verificação rápida

Avalie seus conhecimentos sobre acessores e módulos.

Recapitulação

Os acessores derivam valores armazenados em cache a partir do estado e são acessados por meio de this.$store.getters ou mapGetters. Os módulos dividem um store grande em unidades específicas; definir namespaced: true cria um escopo para eles, permitindo acessar seus membros com o prefixo module/name. Agora você tem o conjunto completo de ferramentas do Vuex: estado, mutações, ações, acessores e módulos.

Perguntas Frequentes

A aula “Getters e módulos” é grátis?

Sim — o texto completo de “Getters e módulos” é 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 “Getters e módulos”?

Calcule o estado derivado e organize a store em módulos. 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 3.

Quanto tempo leva a aula “Getters e módulos”?

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

← Voltar para Vue Academy