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
Fetch Categories
Luego de ver cómo cargar los productos a través de una petición GET, hagamos lo mismo para cargar las categorías.
Uso de fetch para categorías
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.
Acción en el store de categorías
Vamos a definir una acción en el store de categories.
Vamos a agregar una acción que se va a llamar fetchCategories.
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.
Eliminación de getters
No necesitamos getters para las categorías.
Por lo tanto, podemos eliminar este atributo.
Quedándonos de esta manera nuestro store.
Invocación de la acción
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.
Posibles ubicaciones para invocar fetchCategories
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 LeftMenu.
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.
Decisión actual
Por ahora no necesitamos ser tan específicos.
Vamos simplemente a hacer el request desde este mismo lugar.
Uso de useCategoriesStore
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.
Verificación de peticiones
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.
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
Fetch Categories
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript