Fetch Categories

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.

Crea una cuenta y continúa aprendiendo 🚀

Fetch Categories