Quiero aprender más sobre Nuxt 3 y obtuve una plantilla básica para probar keepalive :

problema

Mi test.vue comienza cada vez con un valor falso, lo que activa el setTimeout.

Expectativas

Esperaba que el método de tiempo de espera se ejecutara solo una vez y nuxt almacenará en caché los valores después de un cambio de ruta. Por lo tanto, el método de tiempo de espera no debería comenzar de nuevo.

estructura de carpetas

• /componentes
  • prueba.vue
• /diseños
  • predeterminado.vue
• /páginas
  • /artículo
    • [id].vue
  • index.vue

Acercarse

 // index.vue <script setup> definePageMeta({ keepalive: true }) </script> <template> <div> <h1>Home</h1> <NuxtLink to="/item/1">to item 1</NuxtLink> <hr> <Test /> /* <- keep me alive after route changes */ </div> </template>

 // [id].vue // nothing here, just to navigate back to the root page <template> <div> <h1>Item page</h1> <NuxtLink to="/">back to home</NuxtLink> </div> </template>

 // test.vue <script setup> definePageMeta({ keepalive: true }) const showText = $ref(false) onMounted(() => { if (showText) return setTimeout(() => { showText= true }, 1000); }) </script> <template> <div> <p>test:</p> <div v-if="showText"> /* is always false after route changes */ <p>hello world, should be alive?!</p> </div> </div> </template>

La documentación dice :

Nuxt envolverá automáticamente su página en el componente Vue si establece keepalive: true en su definePageMeta. [...]

preguntas

• ¿Cómo funcionaría keepalive en mi ejemplo?

• ¿Tengo que declarar el keepalive tanto en el componente principal como en el secundario?

• [Opcional]: ¿Qué debo hacer para mantener vivo el padre ( index.vue )?