Módulos en VueX
Comprar curso

48. Módulos en VueX

En este capítulo, aprenderás acerca de los módulos en Vuex, que te permiten dividir el estado de tu aplicación en módulos más pequeños y fáciles de mantener. Aprenderás cómo declarar y utilizar módulos en tu aplicación Vuex y cómo organizar tu estado y lógica de manera más eficiente.

Tema anterior Siguiente tema

1 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Toni

    Toni hace 2 años

    Genial, solo comentar que he mantenido los botones de aumentar y disminuir durante el tutorial y count no pertenece al modulo user, lo cual al usar createNamespacedHelpers no funciona count ya que como he mencionado antes no pertenece al modulo user. Como podemos hacer referencia a los dos módulos usando createNamespacedHelpers . Gracias

    • Cfig hace 1 año

      No se si sea la mejor forma, pero debido a que los mutations llamados desde el componente se encuentran en el modulo counter entonces asocié dos constantes, cada una a distinto helper según módulo; y debido a que en los estados en el componente gestionan estados de ambos módulos (por un único mapState del componente respectivo), mantuve el mapState separado:

      import { mapState, createNamespacedHelpers } from 'vuex';
const { mapGetters, mapActions } = createNamespacedHelpers('user');
const { mapMutations } = createNamespacedHelpers('counter');

      Aunque esto funciona, agradezco orientación al respecto en caso de incurrir en error o en una mala práctica.

    • Alejandro Echavarria hace 1 año

      Yo encontré la siguiente forma:

      Importamos nuestro helper:

      import { createNamespacedHelpers } from 'vuex';

      Mapeamos (Ojo en la parte de counter, ya que solo es necesario agregar el nombre del módulo (para counter sería así => mapCounterMutations)):

      const { mapState, mapGetters, mapActions } = createNamespacedHelpers('user');
const { mapMutations: mapCounterMutations, mapState: mapCounterState } = createNamespacedHelpers('counter');

       

      En la parte de los métodos quedaría así:

      methods: {
		// Mapeo de las mutaciones del modulo counter
        ...mapCounterMutations({
            increment: 'increment',
            decrement:'decrement',
        }),
},
computed: {
		// Mapeo de los estados para el modulo counter
        ...mapCounterState({
            count: 'count'
        }),
        // Mapeo de los estados para el modulde los estados
        ...mapState([
            'nombre',
            'apellido'
        ]),
}

       

      De esta manera podemos importar todos las propiedades independientemente de los módulos que tengamos.