Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Empecemos a implementar nuestras opciones para ordenar productos, en base a precio y nombre. Para ello definimos una nueva variable de estado y agregamos acciones.
Ya mostramos las categorías.
Sin embargo, aún no hemos implementado estas dos opciones que son para ordenar los productos por precio y por nombre.
Para ello, vamos a dirigirnos a nuestro store de productos y modificar nuestro state.
Nuestro estado actualmente tiene:
categoryId
que permite filtrar en base a una categoría seleccionada.Vamos a agregar una opción más llamada order
. Esta variable será una cadena indicando el criterio de orden.
Ejemplo de valores posibles:
order
será "price".order
será "name".Básicamente, este string definirá el criterio de orden de nuestros productos.
Ahora mismo, como no existe ningún orden, los productos se muestran en el orden en que fueron registrados en el arreglo.
Podemos hacer que si order
es una cadena vacía, no se aplique ningún orden en particular y los productos se muestren tal cual vienen.
Vamos a empezar con order
como una cadena vacía y luego la modificaremos según la selección del usuario.
El estado se puede modificar a través de acciones.
Vamos a crear:
orderByPrice
orderByName
Cada acción se encargará de ordenar los productos según corresponda.
Podríamos hacer que la acción reciba el criterio de orden, pero en este caso solo queremos que se invoque la acción y que internamente actualicemos el estado.
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 mostramos las categorías. Sin embargo, aún no hemos implementado estas dos opciones que son para ordenar los productos por precio y por nombre. ¿De qué manera podemos implementar estos dos? Para ello vamos a dirigirnos a nuestro "store" de productos y estando aquí vamos a modificar nuestro "state". Nuestro estado actualmente tiene un listado de productos tal cual es. Tenemos un “categoryId” que permite filtrar en base a una categoría seleccionada y vamos a agregar entonces una opción más que se va a llamar "orden". Y este order va a ser una cadena indicando cuál es el criterio de orden que queremos aplicar. Por ejemplo, si nosotros queremos ordenar por precio, este order dirá "price". Si queremos ordenar por nombre, este order dirá "name". Básicamente este "string" va a contener en base a que queremos ordenar nuestros productos. Ahora mismo que no existe ningún orden, ¿Cuál es el orden que estamos mostrando? El orden en que se muestran es tal cual sea registrado en este arreglo. No hay un orden determinado, simplemente se muestran los elementos tal cual aparecen en este arreglo. Nosotros podemos hacer que si ordenes es una cadena vacía, no se aplique en ningún orden en particular y los productos se muestren tal cual vienen. Eso es algo que también podemos hacer. Entonces vamos a empezar con esta variable de estado “order” vacía luego la vamos a modificar en base a lo que el usuario seleccione en estas opciones. ¿Entonces, de qué manera podemos modificar el Estado? El Estado lo podemos modificar a través de acciones por ejemplo, vamos a crear una acción “orderByPrice" y vamos a crear una acción ”orderByName". Vamos a tener dos acciones encargadas cada una de ordenar. Podríamos hacer también que la acción reciba el criterio de orden. Sin embargo, en este caso sólo queremos que se invoque la acción y ya internamente nosotros seremos responsables de actualizar el estado.
¿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 aprender a programar, gratis?
Sólo debes registrarte 😉.