Getters de Vuex: mapGetters y store sincronizado

Los getters de Vuex permiten acceder al estado con lógica personalizada de forma limpia y reutilizable. Aquí verás cómo crear un getter para duplicar un contador, cómo usar mapGetters en componentes y cómo el store centralizado mantiene sincronizados varios componentes. También se ilustra el uso de Vue Devtools para inspección, time travel, revert y commit.

¿Qué resuelven los getters en Vuex?

Los getters actúan como wrapper del estado para exponer valores derivados sin repetir lógica en cada componente. En lugar de calcular “count por dos” en muchos lugares, defines un único getter y todos los componentes lo consumen como una propiedad reactiva.

¿Qué es un getter y por qué evita duplicar lógica?

• Es una función dentro de getters que devuelve un valor derivado del state.
• Centraliza la lógica: evitas repetir cálculos en múltiples componentes.
• Recibe por parámetro el state y, si hace falta, el objeto getters para encadenar otros getters.

¿Cómo accedo a un valor derivado sin paréntesis?

• Se usa como propiedad reactiva: this.$store.getters.getDouble.
• Importante: no se invoca como función, no lleva paréntesis.

¿Cómo implementar getters y mapGetters en el store y componentes?

Crear el getter es directo y su consumo puede ser manual o con mapGetters cuando hay varios.

¿Cómo crear el getter getDouble en el store?

• Define el objeto getters y agrega una función que reciba state (y opcionalmente getters).
• Retorna el valor derivado, por ejemplo, el doble de count.

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getDouble(state, getters) {
      return state.count * 2;
    }
  }
});

Puntos clave:

• El primer parámetro es state; el segundo, getters, permite reutilizar otros getters.
• La lógica vive en el store, no en los componentes.

¿Cómo usar computed con $store.getters?

• Crea una propiedad computada que retorne this.$store.getters.getDouble.
• Úsala en el template como cualquier dato reactivo.

<!-- App.vue (acceso directo) -->
<template>
  <div>
    <p>{{ double }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    double() {
      return this.$store.getters.getDouble; // sin paréntesis
    }
  }
};
</script>

Buenas prácticas mencionadas:

• Elimina datos innecesarios en data y strings de prueba para evitar ruido.
• Un linter ayuda a detectar detalles como comas faltantes en objetos.

¿Cuándo aplicar mapGetters con varios getters?

• Cuando tienes muchos getters, usa mapGetters para declarar menos código repetido.

<!-- App.vue (con mapGetters) -->
<template>
  <div>
    <p>{{ getDouble }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(['getDouble'])
  }
};
</script>

Claves de uso:

• Se pasa un arreglo de strings con los nombres definidos en el store.
• El nombre mapeado mantiene el mismo identificador del getter.

¿Cómo se sincronizan varios componentes con el store centralizado?

Duplicar la UI en un componente child muestra cómo el store es el origen único de la información y propaga cambios a todos los que lo usan.

¿Qué pasa al duplicar App en un componente child?

• Crea un componente child con la misma lectura del getter.
• Impórtalo con ruta relativa (sin alias @ disponible) y regístralo en components.
• Cambia el nombre interno a "child" para distinguirlo en herramientas.

<!-- Child.vue -->
<template>
  <main>
    <p>{{ getDouble }}</p>
  </main>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'child',
  computed: {
    ...mapGetters(['getDouble'])
  }
};
</script>

<!-- App.vue (uso del child) -->
<template>
  <div>
    <p>{{ getDouble }}</p>
    <div>
      <child />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Child from './Child.vue'; // sin alias *@*

export default {
  name: 'app',
  components: { Child },
  computed: {
    ...mapGetters(['getDouble'])
  }
};
</script>

Resultados observables:

• Al actualizar desde uno, se refleja en el otro de inmediato.
• Ambos consumen el mismo store: el origen es único y los cambios se propagan hacia abajo.
• Pequeños errores (como una coma faltante en components) se detectan fácil con un linter.

¿Qué muestra Vue Devtools sobre eventos y time travel?

• Permite ver eventos y mutaciones con detalles.
• Se puede hacer time travel, revert y commit del estado desde la herramienta.
• Útil para inspeccionar sincronización entre padre e hijo usando los mismos bindings.

¿Tienes dudas o ejemplos de getters que quieras aplicar, como formateos o filtros? Cuéntalo en los comentarios y enriquezcamos las ideas entre todos.