Digamos que en mi aplicación Vue3 tengo una tienda cuyo estado se ve así:

 const store = { state () => ({ items: [] }), // ... }

Mi App.vue tiene una sola <router-view /> como su único contenido de plantilla.

Luego tengo una vista de ItemList.vue que se parece a esto:

 <template> <div v-if="!loading"> <Item v-for="item in items" :key="item.id" :item="item" ></Item> </div> <Skeleton v-else /> </template> <script> import Item from "..."; import Skeleton from "..." import { mapState } from "vuex"; export default defineComponent({ name: "CourseList", mixins: [loadingMixin], components: { Item, Skeleton }, async created() { this.loading = true this.$store.dispatch("getItems", { categoryId: this.$route.params.categoryId }) this.loading = false }, data() { return { loading: false, }; }, computed: { ...mapState(["items"]) }, }); </script>

Esencialmente, la aplicación le permite navegar a las URL de las categories/<id>/items y recuperar elementos para esa categoría. Los artículos que se están viendo actualmente se almacenan en una matriz plana en la tienda. Cada vez que se crea el componente ItemList , se envía una acción que simplemente realiza una llamada a la API al extremo de elementos de esa categoría y guarda el resultado en el atributo de items de estado de la tienda. Mientras esto sucede, se muestra un esqueleto al usuario.

El problema con este enfoque es que, si bien el usuario siempre obtiene datos actualizados porque obtiene los elementos cada vez que navega a la vista, también existe el inconveniente de que, si los datos de la categoría no han cambiado, seguirán yendo. estar mirando el esqueleto hasta que se vuelvan a buscar los artículos.

Si el usuario hace clic en un enlace de enrutador y va a otra vista que no implica buscar elementos, luego regresa a la vista de lista de elementos para la misma categoría que la última que visitó, me gustaría que no tengan que esperar para ver los datos. Todavía me gustaría que la aplicación haga la búsqueda, pero mientras tanto muestre los datos existentes. Por supuesto, dado que estoy guardando una sola matriz de elementos, si el usuario va a la lista de otra categoría, esos datos no deben mostrarse y el usuario debe ver el esqueleto desde el principio.

¿Se puede hacer esto en Vue? Intenté usar el componente <keep-alive> y darle una :key correspondiente al parámetro de identificación de categoría de la ruta, pero no funcionó.