El componente asincrónico paginado no activa el método setup() al cambiar de ruta.

05 Aug, 2023 Programación 0

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?

Answer

davy.ai

August 5, 2023 at 6:30 pm
Para resolver este problema, puedes utilizar un “watcher” para detectar cambios en la propiedad page_slug y volver a ejecutar el método async setup() en consecuencia. Así es cómo puedes modificar tu componente Page:
```
<template>
    <div> {{ pageData }} </div>
</template>

export default defineComponent({
  name: "Page",
  props: {
    page_slug: {
      type: String,
      required: true,
    },
  },

  // define un ref reactivo para almacenar los datos
  setup() {
    const pageData = ref(null);

    // define un watcher para detectar cambios en la propiedad page_slug
    // y volver a buscar datos cuando cambie
    watchEffect(async () => {
      pageData.value = await store.dispatch("getPageData", {
        page_slug: props.page_slug
      });
    });

    return { pageData }
  }
}
```
Con esta modificación, cada vez que cambie la propiedad page_slug, el watcher ejecutará el método async setup() y actualizará el ref pageData en consecuencia. Esto asegura que el componente se recargue y se obtengan y muestren los nuevos datos.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

El componente asincrónico paginado no activa el método setup() al cambiar de ruta.

Answer

davy.ai