fix(frontend): await useAsyncData and initialize state in detail views

Restore await for useAsyncData to ensure data is fetched during SSR
Assign initial data to local refs to prevent empty states on load
This commit is contained in:
2026-05-06 17:26:49 +08:00
parent fa656a8d02
commit 4dc73d42cb
4 changed files with 25 additions and 4 deletions

View File

@@ -34,7 +34,7 @@ const detailTabs = computed<TabOption[]>(() => [
{ value: 'history', label: t('history.editHistory') }
]);
const { data: initialHabitat } = useAsyncData<HabitatDetail | null>(
const { data: initialHabitat } = await useAsyncData<HabitatDetail | null>(
`habitat-detail:${activeHabitatRouteId() ?? 'none'}:${locale.value}`,
async () => {
const routeId = activeHabitatRouteId();
@@ -52,6 +52,11 @@ const { data: initialHabitat } = useAsyncData<HabitatDetail | null>(
);
const initialHabitatLoaded = ref(false);
if (initialHabitat.value) {
habitat.value = initialHabitat.value;
initialHabitatLoaded.value = true;
}
const habitatSeo = computed(() =>
habitat.value && route.meta.editorModal !== true
? resolveSeo({

View File

@@ -73,7 +73,7 @@ const possibleTagEvidenceSections = computed(() => [
{ key: 'neutral', title: t('pages.pokemon.tradingNeutral'), rows: item.value?.possibleTags?.evidence.neutral ?? [] }
]);
const { data: initialItem } = useAsyncData<ItemDetail | null>(
const { data: initialItem } = await useAsyncData<ItemDetail | null>(
`item-detail:${String(route.name)}:${activeItemRouteId() ?? 'none'}:${locale.value}`,
async () => {
const routeId = activeItemRouteId();
@@ -92,6 +92,11 @@ const { data: initialItem } = useAsyncData<ItemDetail | null>(
);
const initialItemLoaded = ref(false);
if (initialItem.value) {
item.value = initialItem.value;
initialItemLoaded.value = true;
}
const itemSeo = computed(() =>
item.value && route.meta.editorModal !== true
? resolveSeo({

View File

@@ -41,7 +41,7 @@ const weathers = ['晴天', '阴天', '雨天'];
const relatedPokemonLimit = 6;
const pokemonDetailRouteNames = new Set(['pokemon-detail', 'pokemon-edit']);
const { data: initialPokemon } = useAsyncData<PokemonDetail | null>(
const { data: initialPokemon } = await useAsyncData<PokemonDetail | null>(
`pokemon-detail:${activePokemonRouteId() ?? 'none'}:${locale.value}`,
async () => {
const routeId = activePokemonRouteId();
@@ -59,6 +59,12 @@ const { data: initialPokemon } = useAsyncData<PokemonDetail | null>(
);
const initialPokemonLoaded = ref(false);
if (initialPokemon.value) {
pokemon.value = initialPokemon.value;
relatedHabitatTab.value = habitatTabValue(initialPokemon.value.environment.id);
initialPokemonLoaded.value = true;
}
const pokemonSeo = computed(() =>
pokemon.value && route.meta.editorModal !== true
? resolveSeo({

View File

@@ -42,7 +42,7 @@ const recipeSubtitle = computed(() => {
return categoryName ?? t('pages.recipes.detailSubtitle');
});
const { data: initialRecipe } = useAsyncData<RecipeDetail | null>(
const { data: initialRecipe } = await useAsyncData<RecipeDetail | null>(
`recipe-detail:${String(route.params.id)}:${locale.value}`,
async () => {
try {
@@ -55,6 +55,11 @@ const { data: initialRecipe } = useAsyncData<RecipeDetail | null>(
);
const initialRecipeLoaded = ref(false);
if (initialRecipe.value) {
recipe.value = initialRecipe.value;
initialRecipeLoaded.value = true;
}
const recipeSeo = computed(() =>
recipe.value && route.meta.editorModal !== true
? resolveSeo({