in my project i’m suffering from delay in API requests and that’s because i have huge amount of data in API, so i added a cache but it still appears white page when page creates, so i was thinking of adding API call on app.vue so request will be faster… is there a way to do it?
now i’m making API request on each page in my project
code below:
import BuildingsService from "../../../services/ApiService"
export default {
data() {
return {
buildings:[],
};
},
//API call, reponse saved in this.buildings
BuildingsService.getBuildings().then((response) => {
this.buildings = response.data.response;
});
}
}<template>
<b-card no-body class="bg-default shadow">
<h2>({{Building.building_number}}) B info</h2>
<b-table-simple responsive>
<b-thead>
<b-tr>
<b-th sticky-column class="table-title">floors </b-th>
</b-tr>
</b-thead>
<b-tbody>
<b-tr v-for="(floor, floor_index) in Building.floors" :key="floor_index">
<b-th sticky-column>{{floor.floor_number}}</b-th>
<b-th v-for="(flat, index) in Building.flats" :key="index" v-show="floor._id == flat.floor">
{{flat.flat_number}}
<b-icon v-if=" roles === 'User' && flat.status === 'متاح'" icon="pencil-square" aria-hidden="true" @click="GotoFlatDetail(flat._id)"></b-icon>
<b-icon v-if="roles === 'Admin'" icon="pencil-square" aria-hidden="true" @click="GotoFlatDetail(flat._id)"></b-icon>
<b-row>
<span class="size-text">{{flat.directions}} </span>
</b-row>
<b-row>
<span class="size-text">{{flat.size}} {{flat.size_unit}}</span>
</b-row>
<b-row>
<p :class="{ 'text-green': flat.status=='available', 'text-red': flat.status=='sold', 'text-yellow': flat.status=='booked' }"> {{ flat.status }}</p>
<a v-show="flat.status=='sold' || flat.status=='booked'"><i class="fa fa-info-circle" aria-hidden="true" @click="showModal(flat._id)"></i></a>
</b-row>
</b-th>
</b-tr>
</b-tbody>
</b-table-simple>
</b-card>
</template>app.vue:
<template>
<router-view :number="count" @send="getNewCount" @reset="onReset">
<sidebar :number="count" @reset="onReset"/>
</router-view>
</template>
<script>
export default {
components: {
sidebar,
},
data() {
return {
};
},
mounted(){
// i wanted to add API call here and use it in other pages
}
}
</script>can i add saved API request array in app.vue and use it on other pages? and is it gonna improve my API call?
thanks in advance