en mi proyecto estoy sufriendo un retraso en las solicitudes de API y eso se debe a que tengo una gran cantidad de datos en la API, así que agregué un caché , pero aún aparece una página en blanco cuando se crea la página, así que estaba pensando en agregar una llamada a la API en la aplicación. vue, por lo que la solicitud será más rápida ... ¿hay alguna manera de hacerlo? ahora estoy haciendo una solicitud de API en cada página en el código de mi proyecto a continuación:
//building.vue where buildings api used <template> <b-row class="icon-examples"> <b-col lg="3" md="6" v-for="(building, index) in buildings" :key="index" > <button type="button" class="btn-icon-clipboard" @click="GoToBuilding(building._id)" > <div> <i class="ni ni-building"></i> <router-link class="question-routerToDetail" :to="`/tables/${building._id}`" > <span > B info - </span> <span>{{building.building_number}}</span></router-link> </div> </button> </b-col> </b-row> </template> <script> import BuildingsService from "../../../services/ApiService" export default { data() { return { }; }, components: { props: ['buildings'], BaseHeader, // buildings:[] }, } } </script> app.vue :
<template> <router-view :number="count" @send="getNewCount" @reset="onReset" :buildings="buildings"> <sidebar :number="count" @reset="onReset"/> </router-view> </template> <script> export default { components: { sidebar, }, data() { return { buildings: [] }; }, created(){ BuildingsService.getBuildings().then((response) => { this.buildings = response.data.response; console.log(this.buildings , "skk") }); } } </script>¿Puedo agregar una matriz de solicitud API guardada en app.vue y usarla en otras páginas? y va a mejorar mi llamada a la API?
gracias de antemano
Editar: pregunta actualizada según la respuesta a continuación ... pero obteniendo datos vacíos sin errores de consola
Sí, puede llamar a la API una sola vez en el componente que contiene router-view y pasar los resultados a los componentes renderizados a través de accesorios. Los componentes renderizados deben declarar los props que se les transmitirán, pero solo si los usarán.
<template> <router-view :number="count" @send="getNewCount" @reset="onReset" :buildings="buildings"> <sidebar :number="count" @reset="onReset"/> </router-view> </template> <script> import BuildingsService from "../../../services/ApiService" export default { components: { sidebar, }, data() { return { buildings: [] }; }, created(){ BuildingsService.getBuildings().then((response) => { this.buildings = response.data.response; }); } } </script>Pero si la llamada a la API devuelve una gran cantidad de datos o es muy lenta, entonces realmente sugiero que verifique la optimización de las consultas de back-end de su API, paginando los resultados y cargándolos progresivamente con carga diferida en el desplazamiento o algo así.
También sería bueno si puede mantener algo en su estado para verificar si los datos se están cargando o no, de modo que pueda mostrar un cargador o algo así en lugar de una página en blanco hasta que obtenga los resultados.
Una posible solución es adaptar getBuildings(), de modo que llamará al backend solo una vez y almacenará el resultado en una propiedad de BuildingsService, por ejemplo, cachedBuildings .
Si cachedBuildings está vacío, getBuildings() llama al backend y almacena el resultado en cachedBuildings.
Si cachedBuildings no está vacío, getBuildings() devuelve cachedBuildings.
La ventaja de esta solución es que solo adapta su código en un lugar y el almacenamiento en caché es transparente para cada componente.