El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Módulos en Vuex

Siguiente ►
►

En aplicaciones grandes, la gestión del estado puede volverse compleja y difícil de manejar. Vuex proporciona una solución a este problema mediante el uso de módulos. Los módulos permiten dividir el estado y la lógica de Vuex en partes más pequeñas y manejables. Cada módulo puede tener su propio estado, mutaciones, acciones, getters e incluso módulos anidados.

  1. ¿Qué son los Módulos en Vuex?

Los módulos en Vuex son una forma de dividir el estado de la aplicación en partes más pequeñas y específicas. Cada módulo puede contener su propio estado, mutaciones, acciones y getters, lo que facilita la organización y el mantenimiento del código.

Ventajas de Usar Módulos:

  • Organización: Facilita la organización del código al dividir el estado en partes más pequeñas y manejables.
  • Reutilización: Permite reutilizar módulos en diferentes partes de la aplicación.
  • Escalabilidad: Mejora la escalabilidad de la aplicación al permitir agregar nuevos módulos sin afectar el estado global.

  1. Creación de Módulos en Vuex

Estructura Básica de un Módulo

Un módulo en Vuex es simplemente un objeto con las mismas propiedades que el store principal: state, mutations, actions y getters.

// store/modules/counter.js
const state = {
  count: 0
};

const mutations = {
  increment(state) {
    state.count++;
  }
};

const actions = {
  increment({ commit }) {
    commit('increment');
  }
};

const getters = {
  count: state => state.count
};

export default {
  state,
  mutations,
  actions,
  getters
};

Registro de Módulos en el Store Principal

Para usar un módulo, debes registrarlo en el store principal.

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import counter from './modules/counter';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    counter
  }
});

  1. Acceso al Estado y Getters de Módulos

Acceso al Estado

Para acceder al estado de un módulo en un componente, puedes usar this.$store.state.moduleName.property.

// En un componente Vue
computed: {
  count() {
    return this.$store.state.counter.count;
  }
}

Acceso a los Getters

Para acceder a los getters de un módulo, puedes usar this.$store.getters['moduleName/getterName'].

// En un componente Vue
computed: {
  count() {
    return this.$store.getters['counter/count'];
  }
}

  1. Mutaciones y Acciones en Módulos

Mutaciones

Las mutaciones en un módulo se definen y se llaman de la misma manera que en el store principal.

// En un componente Vue
methods: {
  increment() {
    this.$store.commit('counter/increment');
  }
}

Acciones

Las acciones en un módulo también se definen y se llaman de la misma manera que en el store principal.

// En un componente Vue
methods: {
  increment() {
    this.$store.dispatch('counter/increment');
  }
}

  1. Módulos Anidados

Vuex permite anidar módulos dentro de otros módulos. Esto es útil para aplicaciones muy grandes donde la organización del estado es crucial.

// store/modules/nestedModule.js
const state = {
  nestedCount: 0
};

const mutations = {
  incrementNested(state) {
    state.nestedCount++;
  }
};

const actions = {
  incrementNested({ commit }) {
    commit('incrementNested');
  }
};

const getters = {
  nestedCount: state => state.nestedCount
};

export default {
  state,
  mutations,
  actions,
  getters
};
// store/modules/parentModule.js
import nestedModule from './nestedModule';

const state = {
  parentCount: 0
};

const mutations = {
  incrementParent(state) {
    state.parentCount++;
  }
};

const actions = {
  incrementParent({ commit }) {
    commit('incrementParent');
  }
};

const getters = {
  parentCount: state => state.parentCount
};

export default {
  state,
  mutations,
  actions,
  getters,
  modules: {
    nestedModule
  }
};
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import parentModule from './modules/parentModule';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    parentModule
  }
});

Ejercicio Práctico

Ejercicio

  1. Crea un módulo llamado user que gestione el estado de un usuario con las siguientes propiedades:

    • name: Nombre del usuario.
    • email: Correo electrónico del usuario.

  2. Define las siguientes mutaciones en el módulo user:

    • setName: Establece el nombre del usuario.
    • setEmail: Establece el correo electrónico del usuario.

  3. Define las siguientes acciones en el módulo user:

    • updateName: Actualiza el nombre del usuario.
    • updateEmail: Actualiza el correo electrónico del usuario.

  4. Define los siguientes getters en el módulo user:

    • userName: Devuelve el nombre del usuario.
    • userEmail: Devuelve el correo electrónico del usuario.

  5. Registra el módulo user en el store principal.

Solución

// store/modules/user.js
const state = {
  name: '',
  email: ''
};

const mutations = {
  setName(state, name) {
    state.name = name;
  },
  setEmail(state, email) {
    state.email = email;
  }
};

const actions = {
  updateName({ commit }, name) {
    commit('setName', name);
  },
  updateEmail({ commit }, email) {
    commit('setEmail', email);
  }
};

const getters = {
  userName: state => state.name,
  userEmail: state => state.email
};

export default {
  state,
  mutations,
  actions,
  getters
};
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user
  }
});

Uso en un Componente

<template>
  <div>
    <p>Nombre: {{ userName }}</p>
    <p>Email: {{ userEmail }}</p>
    <input v-model="newName" placeholder="Nuevo Nombre" />
    <button @click="updateName">Actualizar Nombre</button>
    <input v-model="newEmail" placeholder="Nuevo Email" />
    <button @click="updateEmail">Actualizar Email</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newName: '',
      newEmail: ''
    };
  },
  computed: {
    userName() {
      return this.$store.getters['user/userName'];
    },
    userEmail() {
      return this.$store.getters['user/userEmail'];
    }
  },
  methods: {
    updateName() {
      this.$store.dispatch('user/updateName', this.newName);
    },
    updateEmail() {
      this.$store.dispatch('user/updateEmail', this.newEmail);
    }
  }
};
</script>

Conclusión

En esta sección, hemos aprendido cómo los módulos en Vuex pueden ayudar a organizar y gestionar el estado de aplicaciones grandes. Hemos visto cómo crear, registrar y utilizar módulos, así como cómo anidar módulos dentro de otros módulos. Con esta base, estarás mejor preparado para manejar aplicaciones Vue.js más complejas y escalables. En el próximo módulo, exploraremos cómo usar Vuex en componentes para gestionar el estado de manera efectiva.

◄ Anterior
◄
Siguiente ►
►

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados