Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
mapState
Veamos cómo usar el helper mapState que nos provee Pinia para simplificar nuestro código.
MapState y su uso en Vue
Así como existe un mapActions para mapear métodos con acciones, existe un mapState para mapear computed properties con el state de un store.
Por ejemplo, aquí estamos definiendo una computed property llamada details que accede al estado details de nuestro cartStore.
En nuestro template, estamos usando details para acceder a los detalles del carrito a través de esta computed property. Esto funciona, sin embargo, se puede escribir también usando un helper.
Esto es equivalente a usar destructuring con la función mapState.
Funcionamiento de mapState
mapState funciona de manera muy similar a mapActions. También va a recibir un useCartStore y aquí podemos pasar un objeto o un arreglo.
En nuestro caso, el estado dentro del store se llama details y la computed property también se llama details, por lo tanto, no es necesario indicar un objeto; con indicar un arreglo es suficiente.
De esta forma, podemos reducir la cantidad de código que escribimos. Estas funciones son muy comunes porque generalmente, para acceder a un store, vamos a necesitar mapear acciones y mapear estado.
Diferencias entre mapActions y mapState
La única diferencia entre mapActions y mapState es:
-
mapActionsse define dentro demethodspara mapear métodos con acciones. -
mapStatese define dentro decomputedpara mapear computed properties con alguna variable de estado de nuestro store.
Prueba de Implementación
Vamos a probar esto:
- Agregamos productos al carrito.
- Podemos subir la cantidad.
- Podemos disminuir la cantidad.
- Podemos eliminar productos.
De esta manera, logramos lo mismo pero con menos código.
Reflexión Final
¿Por qué no hice esto anteriormente?
Mi intención era que comprendas exactamente qué es lo que ocurre por detrás, para que luego puedas usar los helpers y, finalmente, usar algo que entiendes cómo funciona.
Si eres nuevo, esto te puede resultar un poco confuso, pero no te preocupes.
Cualquier duda que tengas es bienvenida en la sección de preguntas y respuestas.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Así como existe un mapActions para mapear métodos con acciones, existe un mapState para mapear computed properties con el state de un store. Por ejemplo aquí nosotros estamos definiendo una computed property llamada details que accede al estado details de nuestro cartStore. Como vemos aquí en nuestro template estamos usando details para acceder a los detalles del carrito a través de esta computed property, esto funciona, sin embargo se puede escribir también usando un helper. Esto es equivalente a usar destructuring con la función mapState. MapState funciona de manera muy similar que mapActions, también va a recibir un useCartStore y aquí podemos pasar un objeto o un arreglo. En nuestro caso se llama details el estado dentro del store y se llama details también la computed property, por lo tanto no tenemos que indicar un objeto y con indicar un arreglo es suficiente. De esta forma nosotros podemos reducir la cantidad de código que escribimos y estas funciones son muy comunes porque generalmente siempre para acceder a un store vamos a necesitar mapear acciones y mapear estado. La única diferencia entre mapActions y mapState es que mapActions se define dentro de methods para mapear métodos con acciones, en cambio mapState se define dentro de computed para mapear computed properties con alguna variable de estado de nuestro store. Vamos a probar esto, vamos a agregar productos al carrito, podemos subir, podemos disminuir, podemos eliminar y de esta manera es como podemos lograr lo mismo pero con menos código. ¿Por qué no hice esto anteriormente? Como repito, mi intención era que comprendas exactamente qué es lo que ocurre por detrás para que luego puedas usar los helpers y así finalmente usar algo que entiendes cómo funciona. De todas formas si eres nuevo, esto te puede resultar un poco confuso, pero no te preocupes cualquier duda que tengas es bienvenida en la sección de preguntas y respuestas.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
56
79
81
82
mapState
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript