¡Suscríbete y continúa aprendiendo!

Esta lección está disponible únicamente para suscriptores.

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.

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 pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos


















































































82

mapState










































Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: