Ciclos de vida Vue
El objetivo de esta nueva lección del Curso de Vue 3 es recuperar los favoritos, si los hubiese.
Ahora mismo, si guardamos un favorito y recargamos el navegador, sigue apareciendo en localStorage
, pero no lo vemos en la página.
Sería genial poder decirle a Vue que, tan pronto como se cree la instancia, consulte el almacenamiento local y guarde en el modelo (data
) los favoritos.
Eso es exactamente lo que podemos conseguir con los ciclos de vida de Vue 3.
Ciclos de vida Vue 3
Cuando Vue se inicializa recorre una serie de pasos, desde la creación hasta su destrucción. Cada uno de estos pasos tiene un hook o al que podemos asociar un callback que se ejecutará en ese momento.
Por ejemplo, podemos actuar cuando se crea la instancia Vue 3 con el hook creaated
, cuando se monta con mounted
y cuando se desmonta (o destruye) con unmounted
.
Echa un vistazo al final a los enlaces importantes para llegar a la documentación.
Hook created
Vue 3
Si queremos hacer lo que sea cuando se cargue la instancia Vue, basta con añadir el método created
en la raíz de la misma.
Dentro, lo primero que debemos hacer es consultar localStorage
para comprobar si hay favoritos. Si en la lección anterior convertíamos una estructura válida en JSON con JSON.stringify
, ahora debemos de hacer el proceso contrario: convertir un string en objeto nativo con JSON.parse
(tienes enlaces a la documentación al final).
created() {
const savedFavorites = JSON.parse(window.localStorage.getItem('favorites'))
},
También debemos revisar su longitud (savedFavorites
) y luego recrear un nuevo Map
con los favoritos guardados.
if (savedFavorites.length) {
const favorites = new Map(savedFavorites.map(favorite => [favorite.id, favorite]))
this.favorites = favorites
}
Ahora, al recargar o abrir el navegador, podemos mostrar los favoritos persistidos.
Enlaces importantes:
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Vue 3 desde cero?
Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.