VueUse & Persistir nuestro carrito

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.

Crea una cuenta y continúa aprendiendo 🚀

VueUse & Persistir nuestro carrito