Filtrar por categoría

Lo único que nos falta es usar este nuevo "action". Este “action” tenemos que llamarlo para cambiar la categoría. Nosotros hemos estado anteriormente agregando estos métodos en nuestro "HomeView". Estos métodos actualmente reciben información de "categoryId". Entonces, desde este “HomeView” nosotros podemos llamar a "selectCategory" para llamar a una acción de un stock. Hemos visto que podemos mapear las acciones de esta manera definimos una sección methods y usando "mapActions" metemos cada acción del gestor con un método de nuestro componente. Sin embargo, en esta ocasión eso no nos va a resultar muy útil porque para acceder a un método nosotros usamos distinto. Por ejemplo, usaríamos en este caso distinto "selectCategory". Pero como bien nos dice "this", en este punto se encuentra no definido lo que pasa es que esto ocurre incluso antes de crear el componente. Esto se puede llamar antes de que el componente exista. Por lo tanto, “this” no estaría disponible. Sin embargo, nuestro "store" sí que existe. Por lo tanto, en este caso podemos acceder al "store" directamente. De esta manera. “const_productsSotre = useProductsStore” y desde el "store" vamos a invocar a “selectCategory” y pasar aquí “to.params.categoryId”. Recordemos que "selectCategory" espera un valor numérico. Sin embargo, los parámetros de ruta son cadenas. Lo que vamos a hacer entonces, en este caso, es convertir el parámetro de ruta en un entero. Esto lo conseguimos de esta manera. Escribimos “number()” y dentro ponemos “to.params.categoryId”. De esta manera se convierte al tipo esperado y se envía a "selectCategory". Haremos lo mismo tanto para “route enter” como para “route update”. Guardamos y vamos a actualizar en el navegador. Aquí no está aplicado ningún filtro. Le daré clic a “oficina” y nos muestra sobre los productos de “oficina”, que son los más grandes. Le daré clic a “computadora” para ver los accesorios y aquí los muestra. De esta manera hemos implementado filtros por categoría.

¡Suscríbete y continúa aprendiendo!

Filtrar por categoría