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
mapActions
Veamos cómo usar el helper mapActions que nos provee Pinia para simplificar nuestro código.
Refactorización con mapActions en Pinia
En ShoppingCart, a partir de nuestro cartStore, estamos haciendo uso de tres actions: decrement, increment y deleteProduct.
Cuando se llame a decrementQuantity, estamos llamando al método decrement de nuestro store.
Lo mismo ocurre con los otros métodos: cada uno recibe el argumento y lo pasa al store.
Esto funciona y se entiende bien. Se ve que son métodos que ocurren en este componente y que delegan la ejecución de estas acciones al store. Sin embargo, puede parecer repetitivo.
Uso de mapActions para simplificar el código
Vamos a seguir haciendo lo mismo, pero utilizando un helper que Pinia nos ofrece: mapActions.
Pinia es el framework que usamos para la gestión del estado. mapActions nos permite mapear acciones con métodos. Básicamente, nos ayuda a reducir el código.
Ejemplo de mapActions
En el siguiente ejemplo, se mapean acciones de un counterStore con métodos en un componente:
- La acción
incrementdel store se llamamoaren el componente. - La acción
setCountse llamasetIt.
Esto demuestra que las acciones pueden tener un nombre en el store y otro distinto en el componente.
Aplicación en ShoppingCart
Nuestro código actual se puede simplificar con mapActions. En lugar de escribir manualmente los métodos, podemos hacer lo siguiente:
mapActions(useCartStore, {
decrementQuantity: 'decrement',
incrementQuantity: 'increment',
deleteProduct: 'deleteProduct'
});
Esto define automáticamente los métodos decrementQuantity, incrementQuantity y deleteProduct, asignándolos a las acciones correspondientes del store.
Los ... simplemente sirven para hacer destructuring del resultado y permitir que cada método quede asociado al objeto methods.
Alternativa más breve
Si queremos usar los mismos nombres de las acciones del store, podemos simplificar aún más el código pasando un arreglo de cadenas:
mapActions(useCartStore, ['increment', 'setCount']);
Esto creará métodos con el mismo nombre de las acciones.
Ambas opciones son correctas y dependerá del proyecto cuál usar. Si queremos rapidez, podemos optar por el arreglo de cadenas.
Consideraciones al usar mapActions
Si desde un mismo componente accedemos a dos stores y ambos tienen acciones con nombres en común, es mejor usar la primera opción para asignar nombres personalizados. Así evitamos conflictos y mejoramos la organización del 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.
Ya que estamos refactorizando nuestro código, hay algo que me gustaría comentarte. Aquí en ShoppingCart, a partir de nuestro cartStore, estamos haciendo uso de tres actions: decrement, increment y deleteProduct. ¿Cómo están definidos ellos? Cuando se llame a decrementQuantity, nosotros estamos llamando al método decrement de nuestro store. Cuando se llame a este método, nosotros llamamos a este otro de nuestro store. Cuando se llame a este método, hacemos lo mismo. En los tres casos recibimos el argumento y lo volvemos a pasar a nuestro store. Esto funciona y se entiende muy bien. Se entiende que son métodos que ocurren en este componente, como se puede ver aquí debajo, y se entiende que estamos delegando la ejecución de estas acciones al store. Sin embargo, esto puede parecer un poco repetitivo. Entonces vamos a seguir haciendo lo mismo, pero vamos a hacerlo a través de un helper que Pinia nos ofrece. Pinia, como bien sabes, es el framework que usamos para la gestión del estado de nuestro proyecto. Vamos a usar mapActions, mapActions nos permite mapear acciones con métodos. Si nosotros usamos mapActions, vamos a mapear acciones de nuestro store con métodos de nuestro componente. Ya que a final de cuentas eso es lo que estamos haciendo. Solo que todo este código se va a reducir. Aquí hay un ejemplo. Se está mapeando acciones de un counter store con métodos de este componente. Dentro de este componente, la acción increment del store se llama moar. Y la acción setCount se llama setIt. Entonces, cuando se quiere incrementar, se llama a este método moar. Y cuando se quiere setear un valor, en vez de usar setCount, se llama a setIt. esto es solo un ejemplo para demostrar que las acciones pueden tener un nombre determinado en un store y si nosotros queremos mapear con otro nombre es posible de esta forma, ¿sí?. Entonces, todo este código que aquí tenemos escrito es equivalente a usar mapActions de esta manera, tenemos que pasar aquí el método useCartStore seguido de un objeto, dentro de este objeto como se puede ver vamos a poner un método y vamos a asociarlo con una acción. Por ejemplo vamos a poner un método decrementQuantity y lo vamos a asociar con la acción decrement, siguiendo la misma idea vamos a tener incrementQuantity y lo vamos a asociar con un action llamado increment, vamos a tener un método deleteProduct y lo vamos a asociar con un action deleteProduct ¿sí?. Este mapActions básicamente se encarga de definir por nosotros tres métodos; decrementQuantity, incrementQuantity, deleteProduct y este mapActions nos va a devolver a los métodos ya definidos. Los tres puntos simplemente nos sirven para hacer destructuring del resultado y permitir que cada método que este mapActions devuelve quede asociado al objeto methods. Dicho de otra forma, estas líneas de código las hemos escrito de esta forma para que tú entiendas exactamente qué es lo que está ocurriendo por detrás. Muchas veces se usa mapActions sin entender qué es lo que hace. Nosotros en cambio, primero hemos definido métodos que llaman acciones y hemos mapeado manualmente, pero ahora que ya sabemos cómo funciona podemos abreviar esto de esta manera. Podemos usar mapActions que es una función que nos provee pinia, le indicamos con qué store vamos a mapear y luego le indicamos qué método queremos mapear, a que acción. Método acción, método acción. Entonces vamos a guardar y vamos a hacer una prueba para ver si es cierto. Aquí tenemos esto, podemos aumentar podemos disminuir y podemos eliminar. Es importante también mencionar que aquí nosotros estamos pasando un objeto y estamos mapeando método con acción ¿Por qué? Porque hemos querido usar un método con un nombre distinto a la acción. Sin embargo, si tu quieres usar las acciones con el mismo nombre con que se han definido en el store también lo puedes hacer, y de hecho esto sería más breve, por qué puedes pasar un arreglo simplemente. Puedes usar mapActions, indicar el store y pasar un arreglo de cadenas con el nombre de las acciones. Esto automáticamente creará un método increment mapeado con una acción increment y un método setCount asociado con una acción setCount. De esta forma, podemos mapear directamente acciones con métodos manteniendo el mismo nombre, como este ejemplo lo indica. Ambas opciones son correctas entonces va a depender de tu proyecto. Si quieres ir más rápido puedes hacer esto. Sin embargo, van a haber ocasiones en las que tú desde un mismo componente vas a acceder a dos stores y ambos store podrían tener acciones con nombres en común, entonces en ese caso es importante usar esta anotación de aquí, para que tú puedas referirte a dichas acciones con un nombre distinto.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript