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ó.
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 7
Preguntas 2
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ó.
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
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
Gente si se preguntan por el rootState, solo escriban el getter ya después en el video lo explican
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?