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:
Luego de ver cómo cargar los productos a través de una petición GET, hagamos lo mismo para cargar las categorías.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
En la lección anterior hemos hecho uso de “fetch” para descargar los productos a través de una petición HTTP. Vamos a aplicar ahora la misma idea para las categorías. Para ello vamos a definir una acción en el store de categories. Vamos a agregar una acción que se va a llamar “fetchCategories” y vamos a leer la data, haciendo un request a “/data/categories.json”. Una vez que obtengamos una respuesta válida con formato “json”, vamos a asignar esta data a nuestro estado a través de “this.categories”. No necesitamos “getters” para las categorías, por lo tanto, podemos eliminar este atributo quedándonos de esta manera nuestro store. Aquí hemos definido una acción llamada “fetchCategories”, pero todavía no estamos invocando esta acción. En la lección anterior hemos llamado a “fetchProducts” desde “HomeView”. Podemos hacer lo mismo e invocar a “fetchCategories” también desde “HomeView”, o bien podemos esperar a que cargue “LeftMenu”, que es otro componente más específico. Para finalmente hacer el request desde left menu o incluso podemos ser más específicos y esperar por el evento mounted de “CategoryOptions”. Eso también es posible. O sea que aquí desde “CategoryOptions” podemos invocar a la acción de “fetchCategories”. Por ahora no necesitamos ser tan específicos. Vamos simplemente a hacer el request desde este mismo lugar. Vamos a obtener primero una referencia de “categoriesStore” a través del método “useCategoriesStore”. Y luego, desde este store vamos a invocar a la acción “fetchCategories”. Vamos a actualizar y como vemos, ya estamos obteniendo las categorías, así como los productos. Si presionamos F12 y actualizamos una vez más, vamos a ver cómo terminamos haciendo una petición get a “products.json” y otra más a “categories.json”. Estamos haciendo aquí dos HTTP requests. Dos peticiones HTTP.
¿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 llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos: