No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
6H
3M
18S

Modules

11/19
Recursos

Aportes 6

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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

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

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