Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

State: Order

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.

Implementación de Ordenamiento en la Tienda de Productos

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.

Modificación del Estado en el Store

Para ello, vamos a dirigirnos a nuestro store de productos y modificar nuestro state.

Nuestro estado actualmente tiene:

Un listado de productos tal cual es.
Un 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:

Si queremos ordenar por precio, order será "price".
Si queremos ordenar por nombre, order será "name".

Básicamente, este string definirá el criterio de orden de nuestros productos.

Orden Actual de los 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.

Modificación del Estado

Vamos a empezar con order como una cadena vacía y luego la modificaremos según la selección del usuario.

Creación de Acciones

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 pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

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

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code