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
VueUse & Persistir nuestro carrito
Veamos cómo usar la biblioteca VueUse sobre nuestro proyecto de Vue 3. Específicamente para persistir nuestro carrito de compras.
Instalación de la dependencia
Por ahora nosotros simplemente vamos a hacer uso de VueUs.
Entonces vamos a agregar esta dependencia a nuestro proyecto.
En la terminal, vamos a ejecutar el comando npm install o simplemente npm i seguido de la dependencia, en este caso @VueUs/core.
Importación y uso en el store
Ya se instaló lo siguiente, entonces es importar desde vueuse/core esta función y useLocalStorage en nuestro store.
¿En qué store lo vamos a aplicar?
En este caso lo vamos a aplicar sobre el store del carrito de compras.
Entonces vamos a agregar por aquí el import y vamos a cambiar el valor de los detalles.
Este estado details contiene los detalles agregados al carrito de compras.
Esto de aquí es simplemente el tipo de dato.
Entonces vamos a usar esto useLocalStorage.
Configuración del localStorage
Tenemos que proporcionar una key para que de esta forma se guarde la información en el localStorage.
Vamos a llamarlo cartDetails y a nuestra key, y como valor por defecto le vamos a poner un arreglo vacío.
Aquí tenemos un mensaje de error.
Lo que ocurre es que la función useLocalStorage nos está devolviendo un tipo RemovableRef.
Este RemovableRef, que es un tipo que define VueUs, no coincide con cartDetails.
Esto nos devuelve un tipo de dato que no coincide con cartDetails debido a que vueuse/core hace eso internamente.
Cuando usamos useLocalStorage podemos indicar nosotros el tipo de dato.
De otra manera, podemos indicar el tipo de dato de esta forma.
Más bien con esto ya no tenemos errores y le indicamos a VueUs que vamos a usar este tipo de dato.
Prueba de persistencia
Hagamos una prueba para ver si realmente esta línea mágica funciona.
Vamos a actualizar.
Vamos a agregar dos productos al carrito.
Vamos a actualizar nuestra página y como vemos, seguimos teniendo dos productos.
Si nos dirigimos a la página de carrito vemos que tenemos dos productos.
Vamos a agregar tres unidades de uno y vamos a agregar cinco unidades del otro.
Nuestro total a pagar es $160 y estos son los subtotales.
Vamos ahora a actualizar y como vemos los datos persisten.
Incluso podemos actualizar desde la página de about y la cantidad de ítems que hemos agregado se conserva.
Ventajas de usar useLocalStorage
Esto es gracias a que estamos guardando la información en el local Storage.
En vez de escribir una lógica propia que registre y que lea, estamos aprovechando esta función useLocalStorage de esta dependencia para que se encargue de hacer ello.
Solo tenemos que indicarle una key, y tenemos que indicarle un valor por defecto en caso que esto no exista.
Opcionalmente podemos indicar también un tipo de dato.
Verificación en Chrome
Si nosotros presionamos F12 para abrir la Developer Tools de Chrome, podemos luego dirigirnos a Application.
Aquí en application hay una opción que nos permite ver cuál es el local storage.
Como vemos, el local Storage es información pública y tenemos aquí una clave y su valor.
La clave es cartDetails y el valor es lo que hemos registrado.
Esto es solo para demostrar que realmente estamos haciendo uso de localStorage.
Como en este caso, nosotros estamos guardando información sobre el carrito, nada más.
No hay problema.
Persistencia después de cerrar
Por ejemplo, si limpiamos esto, vemos automáticamente en el lado izquierdo que se elimina la información del carrito.
Pero si volvemos a agregar información a local storage y actualizamos esta información, va a persistir incluso si nosotros cerramos la página y la volvemos a abrir.
La información persiste.
Persiste si es que actualizas, si es que cierras la pestaña y la vuelves a abrir, o si es que cierras la ventana del navegador completamente y la vuelves a abrir.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Por ahora nosotros simplemente vamos a hacer uso de VueUs. Entonces vamos a agregar esta dependencia a nuestro proyecto. En la terminal, vamos a ejecutar el comando “npm install” o simplemente “npm i” seguido de la dependencia, en este caso @VueUs/core. Ya se instaló lo siguiente entonces es importar desde “vueuso/core” esta función y “useLocalStorage” en nuestro "store". ¿En qué “store” lo vamos a aplicar? En este caso lo vamos a aplicar sobre el "store" del carrito de compras. Entonces vamos a agregar por aquí el “import” y vamos a cambiar el valor de los detalles. Este estado “details” contiene los detalles agregados al carrito de compras. Esto de aquí es simplemente el tipo de dato. Entonces vamos a usar esto “useLocalStorage”. Tenemos que proporcionar una “key” para que de esta forma se guarde la información en el “localStorage”. Vamos a llamarlo “cartDetails” y a nuestra key, y como valor por defecto le vamos a poner un arreglo vacío. Aquí tenemos un mensaje de error. Lo que ocurre es que la función y “useLocalStorage” nos está devolviendo un tipo “RemovableRef” y este “RemovableRef”, que es un tipo que define, VueUs, no coincide con “cartDetails”. O sea que esto nos devuelve un tipo de dato que no coincide con “cartDetails” debido a que “vueuse/core” hace eso internamente. Cuando usamos “useLocalStorage” podemos indicar nosotros el tipo de dato, de otra manera, podemos indicar el tipo de dato de esta forma. Más bien con esto ya no tenemos errores y le indicamos a VueUs que vamos a usar este tipo de dato. Hagamos una prueba para ver si realmente esta línea mágica funciona. Vamos a actualizar. Vamos a agregar dos productos al carrito. Vamos a actualizar nuestra página y como vemos, seguimos teniendo dos productos. Si nos dirigimos a la página de “carrito” vemos que tenemos dos productos. Vamos a agregar tres unidades de uno y vamos a agregar cinco unidades del otro. Nuestro total a pagar y $160 y estos son los subtotales. Vamos ahora a actualizar y como vemos los datos persisten. Incluso podemos actualizar desde la página de “about” y la cantidad de ítems que hemos agregado se conserva. Esto es gracias a que estamos guardando la información en el local Storage, y en vez de escribir una lógica propia en nosotros que registre y que lea, estamos aprovechando esta función “useLocalStorage” de esta dependencia para que se encargue de hacer ello. Solo tenemos que indicarle un key, y tenemos que indicarle un valor por defecto en caso que esto no exista. Opcionalmente podemos indicar también un tipo de dato, si nosotros presionamos F12 para abrir la Developer Tools de Chrome, podemos luego dirigirnos a “Application”. Aquí en application hay una opción que nos permite ver cuál es el local storage. Como vemos, el local Storage es información pública y tenemos aquí una clave y su valor, la clave es “cartDetails” y el valor es lo que hemos registrado. Esto es solo para demostrar que realmente estamos haciendo uso de locales storage como en este caso, nosotros estamos guardando información sobre el carrito, nada más. No hay problema. Por ejemplo, si limpiamos esto, vemos automáticamente en el lado izquierdo que se elimina la información del carrito. Pero si volvemos a agregar información a local storage y actualizamos esta información, va a persistir incluso si nosotros cerramos la página y la volvemos a abrir. La información persiste. Persiste si es que actualizas, si es que cierras la pestaña y no vuelves a abrir, o si es que cierras la ventana del navegador completamente y lo vuelves a abrir.
¿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