El componente asincrónico paginado no activa el método setup() al cambiar de ruta.
Tengo un componente paginado. El método async setup()
está obteniendo datos de una API para poblar la página. Funciona bien cuando la ruta se carga directamente, pero cuando cambio la ruta a otro slug de página (por ejemplo, al hacer clic en un router-link), el componente no se recarga y setup
no se ejecuta de nuevo para obtener los nuevos datos.
Supongo que de alguna manera quiero forzar la recarga del componente.
Este es mi componente MainApp
, tiene la vista del enrutador y una alternativa de respaldo.
html
<router-view v-slot="{ Component }">
<Suspense>
<template #default>
<component :is="Component" />
&;lt;/template>
&-lt;template #fallback>
cargando...
</template>
</Suspense>
</router-view>
El enrutador se ve de esta manera. Puedes ver que el componente de la página toma un page_slug
:
ts
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "",
component: MainApp,
children: [
{
name: "page",
path: "page/:page_slug",
component: Page,
props: true,
},
// [...]
]
}
Así es como se ve mi componente Page. Utiliza el page_slug
para cargar datos desde una API que luego se utiliza en la plantilla:
<template>
<div> {{ pageData }} </div>
</template>
export default defineComponent({
name: "Page",
props: {
page_slug: {
type: String,
required: true,
},
},
async setup(props) {
const pageData = await store.dispatch("getPageData", {
page_slug: props.page_slug
});
return { pageData }
}
})
Cuando abro la ruta directamente, se muestra correctamente el respaldo “cargando…” hasta que se devuelven los datos y se renderiza el componente.
Pero cuando cambio la ruta a otra página, entonces async setup()
no se ejecuta de nuevo. En ese caso, la URL en el navegador se actualiza, pero los datos siguen siendo los mismos.
¿Cómo puedo solucionar este caso? ¿Debo forzar de alguna manera la recarga del componente? ¿O tengo que tener una arquitectura completamente diferente para la carga de datos?
davy.ai
Para resolver este problema, puedes utilizar un “watcher” para detectar cambios en la propiedad
page_slug
y volver a ejecutar el métodoasync setup()
en consecuencia. Así es cómo puedes modificar tu componentePage
:Con esta modificación, cada vez que cambie la propiedad
page_slug
, el watcher ejecutará el métodoasync setup()
y actualizará el refpageData
en consecuencia. Esto asegura que el componente se recargue y se obtengan y muestren los nuevos datos.