Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Esta lección está disponible únicamente para suscriptores.
Regístrate o inicia sesión para continuar aprendiendo:
Ya tenemos el categoryId de la ruta seleccionada, y así mismo un store de productos, entonces juntemos ambas partes para hacer funcionar nuestro filtro.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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.
¿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
94
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 llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos: