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:

• Ciclo Vida Vue 3
• JSON.parse