Modules

Clase 11 de 19 • Curso de Vue.js: Manejo del Estado con Vuex

Andrés Martínez González

student•

Las formas de acceder a los modulos desde los mappers de acuerdo a la documentación de vuex sería:

import { mapState } from "vuex";

export default {
	computed: {
		// opción 1 (accesible con this.variable)
		...mapState({
			variable: (state) => state.nombreModulo.variable
		}),

		// opción 2 (accesible con this.["nombreModulo/variable"])
		...mapState(["nombreModulo/variable"]),

		// opción 3 (accesible con this.variable)
		...mapState("nombreModulo", ["variable"]),
	},
};

Personalmente me gusta más la opción 3, pero puede depender del caso de uso

Abril Darynka Tapia Sosa

student•

Muchas gracias, me sirvio tu comentario,

Solo como complemento, yo tuve que agregar al objeto module de modules/profile lo siguiente para su funcionamiento:

  namespaced: true

Yefreilee Danny Samuel Parra

student•

Me encanto la clase porque si hay algo que me guste, es el tener todo ordenado, lo que si no me quedo muy claro fue lo del rootState ya que la verdad nunca supe de donde salió.

Diego Reyes

student•

Me pasó lo mismo.

Platzi Team

student•

De igual modo...

Uriel Solis Salinas

student•

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

student•

buen resumen bro

Jose Alejandro Pantoja Giraldo

student•

Esta clase me toco verla 2 veces, la primera quede SANISIMO jajajaja xD

Referi Games

student•

En qué momento se cambió el getters del archivo index principal, minuto 7:53, me perdí...

Andrés Martínez González

student•

Si te refieres a en qué momento se añadió el rootState, no se vé, se nota un corte de video en el minuto 7:25 y cuando pasa al editor ya está el cambio. Sin embargo la explicación la da en el minuto 9:17, es la forma de acceder a otros modulos desde los getters :)

Jose Alejandro Pantoja Giraldo

student•

Para que funcione esta modalidad de escritura

computed: {
    ...mapState('profile', ['username']),
  },
  methods: {
    ...mapActions('profile', ['updateUsername', 'randomUsername'])
  }

Debes agregar en el index.js de profile

namespaced: true

Julian David Alzate Cuervo

student•

Excelente clase, favor arreglar el video ya que rootState está en la clase pero no explican previamente el porqué de esto

Fernando García Guerrero

student•

Gente si se preguntan por el rootState, solo escriban el getter ya después en el video lo explican