RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update asycData with lazy asyncData

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2022-12-22 02:41:38 +06:00
parent d1986f804d
commit bc5a4b730d
5 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ListHero.vue
View File

@@ -4,7 +4,7 @@ const route = useRoute();
const routeType = computed(() => { const routeType = computed(() => {
return route.params.topic || ""; return route.params.topic || "";
}); });
const { data } = await useAsyncData("listhero", () => const { data } = await useLazyAsyncData("listhero", () =>
queryContent(`/${routeType.value}`).find() queryContent(`/${routeType.value}`).find()
); );

2
pages/blogs.vue
View File

@@ -3,7 +3,7 @@ definePageMeta({
layout: "list", layout: "list",
}); });
const { data, pending } = await useAsyncData("blogs", () => const { data, pending } = await useLazyAsyncData("blogs", () =>
queryContent("/").find() queryContent("/").find()
); );

21
pages/index.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
const { data } = await useAsyncData("index", () => queryContent("/").find()); const { data, pending } = await useLazyAsyncData("index", () =>
queryContent("/").find()
);
// get all the unique types from content // get all the unique types from content
const getTopCategory = computed(() => { const getTopCategory = computed(() => {
@@ -35,7 +37,14 @@ const getRecentContent = computed(() => {
<div <div
class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased min-h-[72vh]" class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased min-h-[72vh]"
> >
<div class="flex-1"> <div v-if="pending">
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
accusamus maxime optio neque praesentium! Id ipsa deleniti vero magni
expedita?
</h1>
</div>
<div v-else class="flex-1">
<h1 class="text-xl pb-8 text-[#e60067]">RECENTLY PUBLISHED</h1> <h1 class="text-xl pb-8 text-[#e60067]">RECENTLY PUBLISHED</h1>
<div class="space-y-8"> <div class="space-y-8">
<template v-for="rp in getRecentContent" :key="rp"> <template v-for="rp in getRecentContent" :key="rp">
@@ -49,7 +58,13 @@ const getRecentContent = computed(() => {
</template> </template>
</div> </div>
</div> </div>
<div class="basis-1/4"> <div v-if="pending">
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam labore
accusamus sit distinctio fugit commodi quam debitis ratione alias illum?
</h1>
</div>
<div v-else class="basis-1/4">
<div> <div>
<h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2> <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
<template v-for="cat in getTopCategory" :key="cat"> <template v-for="cat in getTopCategory" :key="cat">

2
pages/tags/[topic].vue
View File

@@ -8,7 +8,7 @@ const route = useRoute();
const routeType = computed(() => { const routeType = computed(() => {
return route.params.topic || ""; return route.params.topic || "";
}); });
const { data } = await useAsyncData("topic", () => const { data } = await useLazyAsyncData("topic", () =>
queryContent(`/${routeType.value}`).find() queryContent(`/${routeType.value}`).find()
); );

2
pages/tags/index.vue
View File

@@ -2,7 +2,7 @@
definePageMeta({ definePageMeta({
layout: "list", layout: "list",
}); });
const { data } = await useAsyncData("tags", () => queryContent("/").find()); const { data } = await useLazyAsyncData("tags", () => queryContent("/").find());
const getTopCategory = computed(() => { const getTopCategory = computed(() => {
const allpost = data.value || []; const allpost = data.value || [];