0:0012:27

Modules

Curso de Vue.js: Manejo del Estado con Vuex

Clase 11 de 19

Clase 11 / 19

Uriel Solis Salinas

Hace 4 años

Modules

Un módulo es una unidad independiente de la aplicación que contiene su propio state, mutación, actions y getters. Los módulos se utilizan para dividir y organizar el código de la aplicación en partes más pequeñas y manejables, lo que ayuda a simplificar el desarrollo y mantenimiento de aplicaciones grandes y complejas. . Un módulo en Vuex se crea utilizando un objeto que define su estado, mutaciones, acciones y getters. Aquí hay un ejemplo básico de cómo se crea un módulo en Vuex:

const myModule = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => state.count
  }
}

export default myModule;

En este ejemplo, myModule es un módulo que tiene un estado count que es inicializado en 0, una mutación increment que incrementa el valor del estado count, una acción incrementAsync que utiliza la mutación increment para incrementar el estado count después de un retraso de 1 segundo, y un getter getCount que devuelve el valor del estado count.

Para usar un módulo en una aplicación Vuex, se debe registrar en el objeto de el store principal. Por ejemplo:

import { createStore } from 'vuex'
import myModule from './myModule'

const store = createStore({
  modules: {
    myModule
  }
})

En este ejemplo, el módulo myModule se registra en el store principal y se puede acceder a su estado, mutaciones, acciones y getters utilizando la sintaxis de punto. Por ejemplo:

store.state.myModule.count // retorna el valor actual de count
store.commit('myModule/increment') // llama a la mutación increment en myModule
store.dispatch('myModule/incrementAsync') // llama a la acción incrementAsync en myModule
store.getters('myModule/getCount') // llama al getter getCount en myModule

En resumen, los módulos en Vuex se utilizan para dividir y organizar el código de la aplicación en partes más pequeñas y manejables, lo que ayuda a simplificar el desarrollo y mantenimiento de aplicaciones grandes y complejas. Cada módulo tiene su propio estado, mutaciones, acciones y getters, y se registra en el store principal para su uso en toda la aplicación.

Jose Ever Muñoz Muñoz

Hace 3 años

buen resumen bro

Introducción

¿Qué es VUEX y para qué sirve?

Manejo de estado

Patrón FLUX

Conceptos básicos

Instalación y boilerplate de Vuex

Estado simple con Options API

State

Getters

Mutations

Actions

Organización de código

Helpers

Modules

Espacios de nombres

Modelo de datos

Caso de uso: ChatApp con Vuex

Normalización

Canales

Mensajes

Canales y Mensajes

Contactos

Cierre del curso

Despedida

Modules

Progreso del curso

Introducción

Conceptos básicos

Organización de código

Modelo de datos

Cierre del curso