From b4876a7f54133ad6bb83852681c1838a5b87fe4d Mon Sep 17 00:00:00 2001
From: icebergtsn <zyh2433219116@gmail.com>
Date: Wed, 25 Sep 2024 21:13:10 +0800
Subject: [PATCH] fix: first load page

---
 frontend/src/App.vue                          | 93 +++++++++----------
 .../src/pages/application/AppListPage.vue     | 19 +++-
 .../src/pages/application/CategoryPage.vue    | 15 ++-
 frontend/src/pages/application/HomePage.vue   | 18 +++-
 .../src/pages/recommend/RecommendPage.vue     | 18 +++-
 frontend/src/stores/app.ts                    |  3 -
 6 files changed, 99 insertions(+), 67 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6349b57..9d7aab6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,8 +1,8 @@
 <template>
-	<router-view />
+	<router-view v-if="appStore.pageData" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useAppStore } from 'src/stores/app';
 import { onBeforeMount, onBeforeUnmount } from 'vue';
 import { useSocketStore } from 'src/stores/websocketStore';
@@ -14,53 +14,50 @@ import { supportLanguages } from 'src/i18n';
 import { useMenuStore } from 'src/stores/menu';
 // import { testSatisfies } from 'src/utils/version';
 
-export default {
-	setup() {
-		const appStore = useAppStore();
-		const websocketStore = useSocketStore();
-		const userStore = useUserStore();
-		const menuStore = useMenuStore();
-
-		let terminusLanguage = '';
-		let terminusLanguageInfo: any = document.querySelector(
-			'meta[name="terminus-language"]'
-		);
-		if (terminusLanguageInfo && terminusLanguageInfo.content) {
-			terminusLanguage = terminusLanguageInfo.content;
-		} else {
-			terminusLanguage = navigator.language;
-		}
-
-		console.log(navigator.language);
-
-		if (terminusLanguage) {
-			if (supportLanguages.find((e) => e.value == terminusLanguage)) {
-				i18n.global.locale.value = terminusLanguage as any;
-			}
-		}
-
-		onBeforeMount(async () => {
-			await menuStore.init();
-			if (!appStore.isPublic) {
-				// testSatisfies();
-				websocketStore.start();
-				userStore.init();
-				appStore.init();
-			}
-
-			bus.on(BUS_EVENT.APP_BACKEND_ERROR, onErrorMessage);
-		});
+const appStore = useAppStore();
+const websocketStore = useSocketStore();
+const userStore = useUserStore();
+const menuStore = useMenuStore();
+
+let terminusLanguage = '';
+let terminusLanguageInfo: any = document.querySelector(
+	'meta[name="terminus-language"]'
+);
+if (terminusLanguageInfo && terminusLanguageInfo.content) {
+	terminusLanguage = terminusLanguageInfo.content;
+} else {
+	terminusLanguage = navigator.language;
+}
+
+console.log(navigator.language);
+
+if (terminusLanguage) {
+	if (supportLanguages.find((e) => e.value == terminusLanguage)) {
+		i18n.global.locale.value = terminusLanguage as any;
+	}
+}
+
+onBeforeMount(async () => {
+	await appStore.prefetch();
+	await menuStore.init();
+	if (!appStore.isPublic) {
+		// testSatisfies();
+		websocketStore.start();
+		userStore.init();
+		appStore.init();
+	}
 
-		const onErrorMessage = (failureMessage: string) => {
-			BtNotify.show({
-				type: NotifyDefinedType.FAILED,
-				message: failureMessage
-			});
-		};
+	bus.on(BUS_EVENT.APP_BACKEND_ERROR, onErrorMessage);
+});
 
-		onBeforeUnmount(() => {
-			bus.off(BUS_EVENT.APP_BACKEND_ERROR, onErrorMessage);
-		});
-	}
+const onErrorMessage = (failureMessage: string) => {
+	BtNotify.show({
+		type: NotifyDefinedType.FAILED,
+		message: failureMessage
+	});
 };
+
+onBeforeUnmount(() => {
+	bus.off(BUS_EVENT.APP_BACKEND_ERROR, onErrorMessage);
+});
 </script>
diff --git a/frontend/src/pages/application/AppListPage.vue b/frontend/src/pages/application/AppListPage.vue
index cc80614..67a98e9 100644
--- a/frontend/src/pages/application/AppListPage.vue
+++ b/frontend/src/pages/application/AppListPage.vue
@@ -35,7 +35,7 @@
 	</page-container>
 </template>
 <script lang="ts" setup>
-import { ref, onBeforeUnmount, onMounted } from 'vue';
+import { ref, onBeforeUnmount, onMounted, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { AppStoreInfo, CATEGORIES_TYPE } from 'src/constants/constants';
 import EmptyView from 'components/base/EmptyView.vue';
@@ -63,9 +63,6 @@ const updateApp = (app: AppStoreInfo) => {
 
 onMounted(async () => {
 	bus.on(BUS_EVENT.UPDATE_APP_STORE_INFO, updateApp);
-	if (route.params.categories || route.params.type) {
-		await fetchData();
-	}
 });
 
 onBeforeUnmount(() => {
@@ -108,6 +105,20 @@ const fetchData = async () => {
 	isEmpty.value = applications.value.length === 0;
 	loading.value = false;
 };
+
+watch(
+	() => appStore.pageData,
+	async (newValue) => {
+		if (newValue.length > 0) {
+			if (route.params.categories || route.params.type) {
+				await fetchData();
+			}
+		}
+	},
+	{
+		immediate: true
+	}
+);
 </script>
 <style lang="scss" scoped>
 .list-page {
diff --git a/frontend/src/pages/application/CategoryPage.vue b/frontend/src/pages/application/CategoryPage.vue
index f447b59..8b7cacd 100644
--- a/frontend/src/pages/application/CategoryPage.vue
+++ b/frontend/src/pages/application/CategoryPage.vue
@@ -159,7 +159,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import {
 	AppStoreInfo,
@@ -195,7 +195,6 @@ const { t } = useI18n();
 onMounted(() => {
 	topTitle.value = `Top App in ${categoryRef.value}`;
 	latestTitle.value = `Latest App in ${categoryRef.value}`;
-	fetchData(true);
 });
 
 function fetchData(showLoading = false) {
@@ -241,6 +240,18 @@ function fetchData(showLoading = false) {
 		});
 }
 
+watch(
+	() => appStore.pageData,
+	(newValue) => {
+		if (newValue.length > 0) {
+			fetchData(true);
+		}
+	},
+	{
+		immediate: true
+	}
+);
+
 const clickList = (type: string) => {
 	router.push({
 		name: TRANSACTION_PAGE.List,
diff --git a/frontend/src/pages/application/HomePage.vue b/frontend/src/pages/application/HomePage.vue
index b9dae5f..4f54d74 100644
--- a/frontend/src/pages/application/HomePage.vue
+++ b/frontend/src/pages/application/HomePage.vue
@@ -176,7 +176,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import {
 	AppStoreInfo,
@@ -206,10 +206,6 @@ const pageData = ref();
 const appStore = useAppStore();
 const { t } = useI18n();
 
-onMounted(() => {
-	fetchData(true);
-});
-
 function fetchData(showLoading = false) {
 	if (showLoading) {
 		pageLoading.value = true;
@@ -254,6 +250,18 @@ function fetchData(showLoading = false) {
 		});
 }
 
+watch(
+	() => appStore.pageData,
+	(newValue) => {
+		if (newValue.length > 0) {
+			fetchData(true);
+		}
+	},
+	{
+		immediate: true
+	}
+);
+
 const clickList = (type: string) => {
 	router.push({
 		name: TRANSACTION_PAGE.List,
diff --git a/frontend/src/pages/recommend/RecommendPage.vue b/frontend/src/pages/recommend/RecommendPage.vue
index 24ec95b..5b943c7 100644
--- a/frontend/src/pages/recommend/RecommendPage.vue
+++ b/frontend/src/pages/recommend/RecommendPage.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { ref, watch } from 'vue';
 import AppStoreBody from 'src/components/base/AppStoreBody.vue';
 import MyAppCard from 'src/components/appcard/MyAppCard.vue';
 import { AppStoreInfo, CATEGORIES_TYPE } from 'src/constants/constants';
@@ -87,10 +87,6 @@ const latestLoading = ref(true);
 const pageData = ref();
 const appStore = useAppStore();
 
-onMounted(() => {
-	fetchData(true);
-});
-
 async function fetchData(showLoading = false) {
 	if (showLoading) {
 		pageLoading.value = true;
@@ -122,6 +118,18 @@ async function fetchData(showLoading = false) {
 			pageLoading.value = false;
 		});
 }
+
+watch(
+	() => appStore.pageData,
+	(newValue) => {
+		if (newValue.length > 0) {
+			fetchData(true);
+		}
+	},
+	{
+		immediate: true
+	}
+);
 </script>
 
 <style lang="scss">
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index ed61c4b..32a3ea1 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -159,9 +159,6 @@ export const useAppStore = defineStore('app', {
 		},
 
 		async getPageData(category: string): Promise<any> {
-			if (!this.pageData || this.pageData.length == 0) {
-				await this.prefetch();
-			}
 			switch (category) {
 				case CATEGORIES_TYPE.LOCAL.ALL:
 				case CATEGORIES_TYPE.SERVER.Productivity: