Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Persistencia de datos & Local Storage
Veamos por qué es importante contar con un mecanismo de persistencia de datos, y cómo funciona Local Storage para ayudarnos con este propósito. Además vemos alternativas de cómo usarlo con Vue.
Eliminación del setTimeout para indicadores de progreso
En una elección anterior, nosotros hemos agregado un setTimeout para agregar un delay a la ejecución de estos request y de esa manera poder verlos progress indicators.
Pero como ya tenemos esto implementado y hemos hecho pruebas, vamos a proceder a quitar este time out para no simular, sino más bien mostrar estos indicadores cuando realmente correspondan para conexiones de Internet lentas.
Así que ejemplo, aquí vamos a presionar Shift F5 para simular que estamos visitando la página por primera vez, ignorando lo que tenemos en la memoria caché del navegador.
Y ni siquiera llegamos a ver los indicadores de progreso, porque en una conexión de internet rápida, el contenido se descarga instantáneamente.
Visualización del carrito
¿Qué vamos a hacer ahora en este módulo?
Si nosotros agregamos al carrito, podemos ir a visualizar el contenido de lo que hemos agregado en esta ruta de cart.
Y como vemos, toda la información está aquí.
Problema al actualizar la página
Sin embargo, ¿qué pasa si nosotros actualizamos la página?
Se pierde lo que habíamos agregado al carrito.
Puede ser que estemos haciendo una compra y algunos productos y, de pronto, por error, actualizamos la página y nuestro carrito estaría nuevamente vacío.
Eso es algo que debemos evitar porque no es una buena experiencia de usuario que nuestros datos se pierdan solo por actualizar la página.
Por ejemplo, vamos a agregar dos productos y ahora vamos a actualizar desde cart.
Estamos aquí listos para realizar el pedido.
Sin embargo, por error actualizamos y se pierden nuestros productos.
Persistencia del estado del carrito
Por lo tanto, lo que vamos a hacer ahora es que el estado de nuestro store del carrito persista.
Hay muchas formas de lograr ello.
La más común probablemente sea usar el local storage.
Uso de localStorage
¿De qué manera podemos persistir los datos usando el local storage?
Como ya comentamos, hay muchas formas de hacerlo.
Una alternativa consiste en usar el método watch.
watch es un método que nos provee Vue y que nos permite observar cambios en un objeto.
Por ejemplo, podemos actualizar nuestro archivo main e incluir un código como este de aquí.
Este código lo que hace es observar.
La traducción de watch al español es justamente observar.
Entonces se observan cambios en pinia.state y, ante cambios en el state, por ejemplo, se está invocando al método setItem de localStorage.
localStorage es un mecanismo para persistir datos incluso si se refresca la página o si esta se cierra y se vuelve a abrir.
Pero el localStorage es básicamente un objeto global que nos permite guardar información en pares clave valor.
Por ejemplo, aquí se invoca al método setItem, indicamos una clave (o sea, con qué nombre queremos guardar este item) e indicamos el valor para este item.
Siempre clave y valor.
En este caso se está guardando con el nombre de counter el valor de state.counter.
Entonces, si nosotros observamos, podemos guardar en el localStorage y luego en nuestro store, cuando vayamos a definir el state, podemos poner una condición de modo que nuestro estado inicial se lea a partir del localStorage.
Entonces usaríamos algo como lo siguiente.
Si localStorage contiene un item llamado counter, vamos a definir nuestro state como JSON.parse(localStorage.getItem(...)).
Lo que ocurre aquí es que estamos guardando la información como una cadena y luego estamos parseando esa cadena para que nos dé un objeto o un arreglo, lo que sea que hayamos guardado.
Usamos JSON.stringify para guardar como cadena todo este valor y luego usamos JSON.parse para parsear dicha cadena y obtener el objeto, arreglo o variable que guardamos originalmente.
Ventajas de esta alternativa
Si usamos este approach, o sea, esta forma de persistir los datos con watch y con localStorage, no necesitamos instalar nada porque watch ya es un método provisto por Vue y localStorage forma parte de la API de Web Storage que ofrece JavaScript sin instalar ninguna biblioteca.
Esta es una alternativa en la que prácticamente estamos haciendo la escritura y la lectura de datos desde localStorage manualmente.
Alternativa con VueUse
Hay otra alternativa que consiste en usar VueUse.
Si agregamos esta dependencia VueUse a nuestro proyecto, vamos a poder persistir valores con mucho menos código.
La idea es instalar VueUse y luego usarlo de esta manera.
Cuando vayamos a definir el state de nuestro store, vamos a invocar este método useLocalStorage.
Este método useLocalStorage va a recibir una key (una clave como la que se va a guardar en el local storage) y un valor por defecto, de tal manera que los cambios que se hagan van a persistir en el local storage.
Y cuando cargue nuestro store por primera vez al refrescar la página, se va a leer desde localStorage en base a ésta aquí.
Entonces esto internamente implementa algo muy similar a lo que ya tenemos por acá, a la primera alternativa que comentamos.
Pero como ya la dependencia se encarga de eso, nosotros solo conseguimos el mismo resultado con una línea.
Alternativa con plugin de Pinia
De hecho, hay una tercera alternativa que es usando un plugin.
Si nosotros instalamos este plugin de Pinia, podemos luego invocar este método pinia.use y pasarle aquí el plugin que hemos instalado.
Y finalmente nuestro estado queda de la misma forma como ya estaba.
Pero agregamos un valor booleano indicando que queremos persistir esta data.
Si nosotros indicamos persist: true a nuestro store, como estamos usando este plugin, ya el plugin internamente se encargará de persistir la data en el local storage.
Incluso nos permite configurar esto.
Si no queremos usar localStorage y queremos usar otro storage como sessionStorage, se puede también personalizar.
Y este plugin ofrece incluso más opciones de configuración.
Conclusión
Por ahora nosotros simplemente vamos a hacer uso de VueUse.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
En una elección anterior, nosotros hemos agregado un "setTimeout" para agregar un delay a la ejecución de estos request y de esa manera poder verlos progress indicators. Pero como ya tenemos esto implementado y hemos hecho pruebas, vamos a proceder a quitar este time out para no simular, sino más bien mostrar estos indicadores cuando realmente correspondan para conexiones de Internet lentas. Así que ejemplo aquí vamos a presionar Shift F5 para simular que estamos visitando la página por primera vez, ignorando lo que tenemos en la memoria caché del navegador Y ni siquiera llegamos a ver los indicadores de progreso, porque en una conexión de internet rápida, el contenido se descarga instantáneamente. ¿Qué vamos a hacer ahora en este módulo? Si nosotros agregamos al carrito, podemos ir a visualizar el contenido de lo que hemos agregado en esta ruta de "cart" y como vemos, toda la información está aquí. Sin embargo, ¿Qué pasa si nosotros actualizamos la página? Se pierde en lo que habíamos agregado el carrito. Puede ser que estemos haciendo una compra y algunos productos y de pronto por error, actualizamos la página y nuestro carrito estaría nuevamente vacío. Eso es algo que debemos evitar porque no es una buena experiencia de usuario que nuestros datos se pierdan solo por actualizar la página. Por ejemplo, vamos a agregar dos productos y ahora vamos a actualizar desde "cart". Estamos aquí listos para realizar el pedido. Sin embargo, por error actualizamos y se pierden nuestros productos. Por lo tanto, lo que vamos a hacer ahora es que el estado de nuestro "store" del carrito persista. Hay muchas formas de lograr ello. La más común probablemente sea usar el local storage. ¿De qué manera podemos persistir los datos usando el local storage? Como ya comentamos, hay muchas formas de hacerlo. Una alternativa consiste en usar el método Watch Watch, es un método que nos provee "vue" y que nos permite observar cambios en un objeto. Por ejemplo, podemos actualizar nuestro archivo "main" e incluir un código como este de aquí. Este código lo que hace es observar. La traducción de Watch al español es justamente observar. Entonces se observan cambios en "pinia.state" y ante cambios en el "state", por ejemplo, se está invocando al método “set item” de "localStorage". "LocalStorage" es un mecanismo para persistir datos incluso si se refresca la página o si esta se cierra y se vuelve a abrir. Pero el “localStorage” es básicamente un objeto global que nos permite guardar información en pares clave valor. Por ejemplo, aquí se invoca al método “setItem” indicamos una clave, o sea, con qué nombre queremos guardar este item e indicamos el valor para este item. Siempre clave y valor. En este caso se está guardando con el nombre de “counter” el valor de "state.counter”. Entonces si nosotros observamos podemos guardar en el “localStorage” y luego en nuestro “store” cuando vayamos a definir el "state" podemos poner una condición de modo que nuestro estado inicial se lea a partir del “localStorage”. Entonces usaríamos algo como lo siguiente Si “localStorage” contiene un item llamado “counter”, vamos a definir nuestro "state" como “json.parse(localStorage.getItem”. Lo que ocurre aquí es que estamos guardando la información como una cadena y luego estamos parciando esa cadena para que nos dé un objeto o un arreglo, lo que sea que hayamos guardado. Usamos “json.stringify” para guardar como cadena todo este valor y luego usamos json.parse, parsear dicha cadena y obtener el objeto, arreglo o variable que guardamos originalmente. Si usamos este approach, o sea, esta forma de persistir los datos con Watch y con localStorage”, no necesitamos instalar nada porque Watch ya es un método provisto por "vue" y “localeStorage” forma parte de la API de Web Storage que ofrece JavaScript sin instalar ninguna biblioteca. Esta es una alternativa en la que prácticamente estamos haciendo la escritura y la lectura de datos desde "localStorage" manualmente. Hay otra alternativa que consiste en usar "VueUs”. Si agregamos esta dependencia "VueUs" a nuestro proyecto, vamos a poder persistir valores con mucho menos código. La idea es instalar VueUs y luego usarlo de esta manera, cuando vayamos a definir el "state" de nuestro Store, vamos a invocar este método “useLocalStorage”. Este método “useLocalStorage” va a recibir un “key”, una clave como la que se va a guardar en el local storage y un valor por defecto de tal manera que los cambios que se haga van a persistir en el local storage. Y cuando cargue nuestro store por primera vez al refrescar la página, se va a leer desde "localStorage" en base a ésta aquí. Entonces esto internamente implementa algo muy similar a lo que ya tenemos por acá. A la primera alternativa que comentamos. Pero como ya la dependencia se encarga de eso, nosotros solo conseguimos el mismo resultado con una línea. De hecho, hay una tercera alternativa que es usando un plugin. Si nosotros instalamos este plugin de Pinia, podemos luego invocar este método “pinia.use” y pasarle aquí el plugin que hemos instalado y finalmente nuestro estado queda de la misma forma como ya estaba. Pero agregamos un valor booleano indicando que queremos persistir esta data. Si nosotros indicamos “persist:true” a nuestro store, como estamos usando este plugin, ya el plugin internamente se encargará de persistir la data en el local storage. Incluso nos permite configurar esto si no queremos usar local storage y queremos usar otro storage como “sessionStorage”, se puede también personalizar y este plugin ofrece incluso más opciones de configuración. Por ahora nosotros simplemente vamos a hacer uso de VueUs.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript