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
Order by price & name
Veamos cómo ordenar nuestros productos por precio y por nombre, sin afectar al filtro existente de categorías.
Modificación del estado this.order
Vamos a modificar entonces nuestro estado this, específicamente order.
-
this.order = priceen este caso. -
this.order = nameen este caso.
Y hasta aquí vamos a guardar nuestros cambios.
Nuevas acciones en stateOrder
Si ya tenemos un stateOrder, ya tenemos dos acciones nuevas para modificar el orden.
Llamar acciones al hacer click en los ítems
Lo siguiente es llamar a estas acciones cuando el usuario haga click en estos items.
- Dirígete a
categoryList. - En la parte inferior donde tenemos el orden, agrega un evento de click a nuestras opciones.
- Quita el color, ya que aparentemente es el mismo que viene por defecto.
- Agrega el evento de click.
La idea es ejecutar algo cuando se haga click a cada uno de estos listItems.
Mapear métodos con acciones del store
Queremos mapear los métodos de este componente con las acciones del store de productos.
- En
methods, agregamapActions. - Indica
useProductsStore. - En un arreglo, pon las acciones a mapear:
orderByName,orderByPrice.
Con esto, ya tendremos disponibles estas dos acciones como métodos.
Renombrar método selectCategory a goToCategory
Para evitar confusión, renombramos selectCategory a goToCategory.
- Porque estamos generando una navegación.
- Estamos haciendo push sobre nuestro
router.
Ejecutar acciones al hacer click
Cuando se haga click en "por precio":
- Llama al método
orderByPrice.
Cuando se haga click en "por nombre":
- Llama al método
orderByName.
Estos métodos invocan las acciones correspondientes.
El estado se actualizará con el valor que corresponda.
Usar la variable order en el listado
Tenemos que usar la variable order cuando devolvemos el listado de productos.
Actualmente:
-
state.productsy unfilter. - El
getterfiltra en base a la categoría.
Si no hay categoría:
- Se devuelve el arreglo de productos tal cual.
Crear nueva variable products
Creamos la variable products.
- Empezará con valor nulo.
- Recibirá valor según corresponda.
Si hay una categoría:
-
productsserá igual al arreglo filtrado.
Si no hay categoría:
-
productsserá igual astate.products.
Este _product es el arreglo original de productos.
Aplicar orden después del filtro
Luego de aplicar el filtro:
- Se aplicará el orden.
Si order es igual a cadena vacía:
- No hacemos nada.
- Devolvemos
products.
Si order es igual a price:
- Ordenamos usando el método
sort.
Método sort y funciones de comparación
El método sort acepta una función con el criterio de orden.
Si stateOrder tiene como valor name:
- Ordenamos en base a
name.
Usamos una función con formato de arrow function:
-
a.name.localeCompare(b.name)→ Orden alfabético.
En caso de precio:
-
a.price - b.price→ Orden ascendente.
Para cambiar el orden:
-
b.price - a.priceo compararbconaprimero.
Prueba del orden aplicado
Se guarda y se realiza una primera prueba:
-
Click en "por precio":
- Productos: 20, 56, 450.
- Orden por precio aplicado.
-
Click en "por nombre":
- Productos empiezan por A, luego M, P y S.
- Orden alfabético aplicado.
-
Click nuevamente en "por precio":
- Se aplica nuevamente el orden por precio.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Vamos a modificar entonces nuestro estado "this" específicamente “order”. “this.order = price” en este caso. “this.order = name” en este caso y este Y hasta aquí vamos a guardar nuestros cambios. Si ya tenemos un "stateOrder", ya tenemos dos acciones nuevas para modificar el orden. Lo siguiente es llamar a estas acciones cuando el usuario haga click en estos items. Entonces nos dirigimos a "categoryList" y en la parte inferior donde tenemos el orden, vamos a agregar un evento de click a nuestras opciones. Vamos a quitar de hecho también este color, ya que aparentemente es el mismo que viene por defecto. Y entonces vamos a agregar por aquí nuestro evento de click. La idea es que ejecutemos algo cuando se haga click a cada uno de estos "listItems". Nosotros queremos mapear los métodos de este componente con las acciones que están en el "store" de productos. Por lo tanto, aquí en "methods" vamos a agregar "mapActions". Vamos a indicar "useProductsStore" y luego en un arreglo vamos a poner las acciones que queremos mapear. En este caso por el “orderByName”, “orderByPrice”, muy bien. Con esto ya vamos a tener disponible estas dos acciones en forma de métodos. Dentro de este arreglo de métodos y para evitar confusión, vamos a renombrar este "selectCategory". Vamos a llamarlo "goToCategory", porque en realidad estamos generando una navegación. Estamos haciendo push sobre nuestro “router”. Bien, entonces aquí cuando se haga click en "por precio", vamos simplemente a llamar a nuestro método “orderByPrice” y cuando se haga click aquí en "por nombre", vamos a llamar a nuestro método. “orderByName”. Estos métodos van a invocar las acciones correspondientes y entonces nuestro estado se va a actualizar con el valor que corresponda. Finalmente, tenemos que usar esta variable order. Cuando devolvemos nuestro listado de productos, cuando devolvemos nuestro listado de productos, tenemos aquí un “state.products” y tenemos aquí un “filter”. Actualmente, este "getter" simplemente se encarga de filtrar en base a la categoría. Si no hay una categoría, se está devolviendo el arreglo de productos tal cual. Entonces lo que nosotros vamos a hacer es crear una variable nueva llamada “products”. “Products” empezará con un valor nulo, pero recibirá su valor dependiendo de lo que corresponda. Por ejemplo, si hay una categoría “products”, será igual a nuestro arreglo filtrado. Empezaremos filtrando por categorías, si es que hay una categoría. Si es que no hay “product”, será igual a “state.products”. Este guion bajo producto es nuestro arreglo original de productos, si hay una categoría, filtramos. Si no hay una categoría, entonces “products” recibirá el arreglo de productos tal cual y luego de aplicar el filtro, si es que hay, vamos a aplicar el orden. Si esto primero filtra y luego estoy aquí ordenado para ordenar. Vamos a hacer también una pregunta si “order” es igual a una cadena vacía, no haremos nada. Simplemente vamos a devolver “products”. En cambio, si “order” es igual a “price”, vamos a ordenar el arreglo de productos usando el método “sort”. El “método sort” acepta una función con el criterio de orden que queremos aplicar siguiendo la misma idea. Si el "stateOrder" tiene como valor “name”, vamos a ordenar en base a “name”. En JavaScript, cuando nosotros queremos ordenar, tenemos que hacer una comparación "sort" espera que le pasemos una función en este caso la estamos pasando con el formato de "arrow function" y entonces aquí vamos a poner "a.name.localeCompare". O sea, vamos a hacer una comparación de textos y vamos a poner aquí “b.name”. De esta manera es como todos los elementos se sortean y se ordenan en base al nombre. Básicamente siempre “sort” siempre va a esperar una función. Nosotros tenemos que indicarle de qué manera debe comparar dos elementos para que en base a ellos establezca un orden. En el caso del precio, por ejemplo, podemos poner “a.price - b.price”. Vamos a ver si esto nos lo ordena de manera ascendente o descendente, y luego, si queremos cambiar el orden, simplemente pondríamos el precio de B, menos el precio de A. O bien, aquí compararemos primero B con A. Hasta aquí vamos a guardar. Y llegamos entonces una primera prueba le daré click en "por precio". Como vemos, primero se sitúan los productos con precio 20, luego 56, pero 450. Aquí se ha aplicado un orden "por precio". Le daré click a "por nombre" y en este caso empezamos con el producto que tiene la letra A. Luego M, luego P y luego S. Es decir, se está aplicando en orden alfabético. Si nuevamente le damos click "por precio", nuevamente vemos este orden aplicado.
¿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