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:
@@ -34,7 +34,7 @@ const detailTabs = computed<TabOption[]>(() => [
|
|||||||
{ value: 'history', label: t('history.editHistory') }
|
{ 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}`,
|
`habitat-detail:${activeHabitatRouteId() ?? 'none'}:${locale.value}`,
|
||||||
async () => {
|
async () => {
|
||||||
const routeId = activeHabitatRouteId();
|
const routeId = activeHabitatRouteId();
|
||||||
@@ -52,6 +52,11 @@ const { data: initialHabitat } = useAsyncData<HabitatDetail | null>(
|
|||||||
);
|
);
|
||||||
|
|
||||||
const initialHabitatLoaded = ref(false);
|
const initialHabitatLoaded = ref(false);
|
||||||
|
if (initialHabitat.value) {
|
||||||
|
habitat.value = initialHabitat.value;
|
||||||
|
initialHabitatLoaded.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
const habitatSeo = computed(() =>
|
const habitatSeo = computed(() =>
|
||||||
habitat.value && route.meta.editorModal !== true
|
habitat.value && route.meta.editorModal !== true
|
||||||
? resolveSeo({
|
? resolveSeo({
|
||||||
|
|||||||
@@ -73,7 +73,7 @@ const possibleTagEvidenceSections = computed(() => [
|
|||||||
{ key: 'neutral', title: t('pages.pokemon.tradingNeutral'), rows: item.value?.possibleTags?.evidence.neutral ?? [] }
|
{ 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}`,
|
`item-detail:${String(route.name)}:${activeItemRouteId() ?? 'none'}:${locale.value}`,
|
||||||
async () => {
|
async () => {
|
||||||
const routeId = activeItemRouteId();
|
const routeId = activeItemRouteId();
|
||||||
@@ -92,6 +92,11 @@ const { data: initialItem } = useAsyncData<ItemDetail | null>(
|
|||||||
);
|
);
|
||||||
|
|
||||||
const initialItemLoaded = ref(false);
|
const initialItemLoaded = ref(false);
|
||||||
|
if (initialItem.value) {
|
||||||
|
item.value = initialItem.value;
|
||||||
|
initialItemLoaded.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
const itemSeo = computed(() =>
|
const itemSeo = computed(() =>
|
||||||
item.value && route.meta.editorModal !== true
|
item.value && route.meta.editorModal !== true
|
||||||
? resolveSeo({
|
? resolveSeo({
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ const weathers = ['晴天', '阴天', '雨天'];
|
|||||||
const relatedPokemonLimit = 6;
|
const relatedPokemonLimit = 6;
|
||||||
const pokemonDetailRouteNames = new Set(['pokemon-detail', 'pokemon-edit']);
|
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}`,
|
`pokemon-detail:${activePokemonRouteId() ?? 'none'}:${locale.value}`,
|
||||||
async () => {
|
async () => {
|
||||||
const routeId = activePokemonRouteId();
|
const routeId = activePokemonRouteId();
|
||||||
@@ -59,6 +59,12 @@ const { data: initialPokemon } = useAsyncData<PokemonDetail | null>(
|
|||||||
);
|
);
|
||||||
|
|
||||||
const initialPokemonLoaded = ref(false);
|
const initialPokemonLoaded = ref(false);
|
||||||
|
if (initialPokemon.value) {
|
||||||
|
pokemon.value = initialPokemon.value;
|
||||||
|
relatedHabitatTab.value = habitatTabValue(initialPokemon.value.environment.id);
|
||||||
|
initialPokemonLoaded.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
const pokemonSeo = computed(() =>
|
const pokemonSeo = computed(() =>
|
||||||
pokemon.value && route.meta.editorModal !== true
|
pokemon.value && route.meta.editorModal !== true
|
||||||
? resolveSeo({
|
? resolveSeo({
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ const recipeSubtitle = computed(() => {
|
|||||||
return categoryName ?? t('pages.recipes.detailSubtitle');
|
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}`,
|
`recipe-detail:${String(route.params.id)}:${locale.value}`,
|
||||||
async () => {
|
async () => {
|
||||||
try {
|
try {
|
||||||
@@ -55,6 +55,11 @@ const { data: initialRecipe } = useAsyncData<RecipeDetail | null>(
|
|||||||
);
|
);
|
||||||
|
|
||||||
const initialRecipeLoaded = ref(false);
|
const initialRecipeLoaded = ref(false);
|
||||||
|
if (initialRecipe.value) {
|
||||||
|
recipe.value = initialRecipe.value;
|
||||||
|
initialRecipeLoaded.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
const recipeSeo = computed(() =>
|
const recipeSeo = computed(() =>
|
||||||
recipe.value && route.meta.editorModal !== true
|
recipe.value && route.meta.editorModal !== true
|
||||||
? resolveSeo({
|
? resolveSeo({
|
||||||
|
|||||||
Reference in New Issue
Block a user