Cómo usar Pinia y Watch para almacenar estados en Vue | Curso de Vue.js 3 - 07

Sobre esta lección

En este séptimo video de la guía gratuita de Vue.js 3 con Composition API y Script Setup, aprenderás a crear un store de Pinia en Vue.js 3 para almacenar los datos del formulario de registro que creamos en el capítulo anterior. Utilizaremos Pinia -el reemplazo de Vuex que estaba disponible con anterioridad y era la libería de estados para Vue.js 2- para gestionar el estado de nuestra aplicación de forma eficiente y sencilla. Además, te mostraré cómo utilizar la función Watch de Vue.js 3 para observar cambios en el store y cómo actualizar las variables del componente Sidebar (creado en capítulos anteriores de este curso) en respuesta a estos cambios. ¡Sigue este video para dar un paso más en el dominio de Vue.js 3 y la gestión de estado en tus aplicaciones! 00:00 Subiendo avances del proyecto a GitHub con Sourcetree, la app para usar GIT sin comandos 01:36 ¿Qué es y cómo funciona Pinia en Vue 3? 03:13 Cómo crear un Store de Pinia para almacenar datos en Vue JS 10:30 Cómo agregar datos a un Store de Pinia desde un formulario en Vue.js 3 16:13 Cómo utilizar la función Watch de Vue para observar cambios en el Store y cambiar las variables de una vista 23:14 Cómo crear un formulario de registro en Vue 3 con Script Setup Página oficial de la documentación de Vue 3: https://vuejs.org Página oficial de la documentación de Pinia: https://pinia.vuejs.org/ Herramientas que ocupamos en este curso: Visual Studio Code: https://code.visualstudio.com/ + Instalar la extensión oficial de Vue (la puedes buscar como VOLAR) Sourcetree: https://www.sourcetreeapp.com/ | Esta herramienta nos permite utilizar GIT sin comandos. En google Chrome instala la extensión oficial de Vue.js 3, llamada vue.js devtools ¡No te pierdas esta oportunidad de dominar Vue.js 3 de manera clara y efectiva! En próximos videos, crearemos un formulario de login añadiendo CSS y el framework Bootstrap 5. Utilizaremos Pinia, Vue-Router, VeeValidate y Yup, realizando peticiones a un backend mediante API con Axios. Para más contenido como este, tutoriales de Vue 3 u otros frameworks de desarrollo web frontend (Angular, React), así como de desarrollo web full stack con Nuxt o Laravel, asegúrate de darle "Me gusta", compartir el video y suscribirte. Si este video te fue útil o tienes sugerencias sobre qué más deberíamos abordar en este curso de Vue 3, déjanos tu comentario #vuejs #pinia #watch