mapState

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.

¡Suscríbete y continúa aprendiendo!

mapState