Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Esta lección está disponible únicamente para suscriptores.
Regístrate o inicia sesión para continuar aprendiendo:
Veamos cómo usar el helper mapState que nos provee Pinia para simplificar nuestro código.
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
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript
Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos: