No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Modules

11/19
Recursos

Aportes 7

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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ó.

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

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.

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

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
Excelente clase, favor arreglar el video ya que rootState está en la clase pero no explican previamente el porqué de esto

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