Vue Academy · Lección

Getters y módulos

Calcule el estado derivado y organice el store en módulos

Getters y módulos es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

Estado computado con getters

A veces necesita un estado derivado, como una lista filtrada o un recuento. Un getter es el equivalente en el store de una propiedad computada: deriva un valor del estado y almacena el resultado en caché hasta que cambian sus dependencias.

Definir un getter

Un getter es una función que recibe el estado y devuelve un valor derivado.

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

Getters que utilizan otros getters

Un getter recibe un segundo argumento con todos los demás getters, por lo que puede combinarlos.

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

Acceder a los getters

Lea los getters mediante this.$store.getters en una propiedad computada.

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

Getters con estilo de método

Devuelva una función desde un getter para poder pasar argumentos. Tenga en cuenta que los getters con estilo de método no se almacenan en caché y se ejecutan en cada llamada.

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

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

El helper mapGetters

Al igual que mapState, el helper mapGetters convierte los getters en propiedades computadas automáticamente.

import { mapGetters } from "vuex"

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

¿Por qué dividir en módulos?

Un store grande se vuelve difícil de mantener. Vuex permite dividir el store en módulos, cada uno con su propio estado, mutaciones, acciones y getters, de modo que la lógica relacionada permanezca agrupada.

Definir un módulo

Un módulo es simplemente un objeto con las mismas opciones que un store. Los módulos se registran bajo la clave modules.

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

Registrar módulos

Combine los módulos en el store raíz bajo modules. Cada clave se convierte en el nombre del módulo.

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

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

Añadir espacios de nombres a los módulos

Establezca namespaced: true para que un módulo tenga su propio ámbito. Esto evita conflictos de nombres entre módulos y hace explícita la estructura.

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

Acceder a módulos con espacios de nombres

Cuando utilice espacios de nombres, anteponga el nombre del módulo al confirmar mutaciones, despachar acciones o leer getters.

// 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")

Comprobación rápida

Compruebe sus conocimientos sobre getters y módulos.

Repaso

Los getters derivan valores almacenados en caché a partir del estado y se accede a ellos mediante this.$store.getters o mapGetters. Los módulos dividen un store grande en unidades específicas; establecer namespaced: true les asigna un ámbito propio, por lo que se accede a sus miembros con el prefijo module/name. Ahora dispone del conjunto completo de herramientas de Vuex: estado, mutaciones, acciones, getters y módulos.

Preguntas frecuentes

¿La lección «Getters y módulos» es gratis?

Sí — el texto completo de «Getters y módulos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Getters y módulos»?

Calcule el estado derivado y organice el store en módulos Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.

¿Cuánto tiempo toma la lección «Getters y módulos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy