Gestión de Estado Moderna con Vue 3

Hola, ahora vamos a hablar sobre la gestión de estado moderna con Vue Free.

Hola, soy Vanessa. Puedes encontrarme en línea como Vanze. Soy responsable del front end en Cevy. Soy coanfitriona de dos podcasts diferentes, Expect Exception, donde hablamos sobre pruebas de front-end testing y Working Draft, un podcast alemán sobre web development. Y hace aproximadamente un año, en septiembre de 2020, recuerdo que estaba allí viendo a Avenu en la conferencia de Vue JS, finalmente diciendo, hey, Vue Free está ahí fuera, y ahora quiero que vayas conmigo en el viaje, cómo instalé Vue Free y usé conceptos alternativos para usar Vue Free completamente sin Options API y también sin VueX. No sugiero que debas usar Vue Free sin Options API o reemplazar VueX. Quiero decirte que la Composition API es tan poderosa que realmente podemos usar Vue sin ambas herramientas, y tenía sentido para mí en un estado en el que tenía una aplicación realmente pequeña que comencé con Vue Free desde cero y no tuve que migrar desde mi aplicación Vue2.

En los ejemplos de code que mostraré en los próximos minutos, usaré la función de configuración y prefiero use ref sobre reactive. Pero todo lo que mostraré ahora, por supuesto, puedes usar el azúcar sintáctico de configuración de script en su lugar y puedes elegir usar reactive en lugar de ref si lo prefieres.

Como mis componentes de mi muy pequeña aplicación Vue Free hace aproximadamente un año comenzaron a crecer porque tenía algunos problemas más complejos que necesitaban algunas soluciones más complejas, yo y por lo tanto también esta charla fueron inspirados principalmente por estos tres artículos. Agrupar, extraer patrón compartido, state management con composition API, y ¿deberías usar composition API como un reemplazo para Vuex.

Enfoquémonos en tres de las API de Vue por ahora, la options API, reactivity API, y composition API. La options API, podemos pensar en esta estructura de objeto que conocemos de nuestras aplicaciones de un solo archivo en Vue2, donde tenemos nuestros data computed, methods, watch mounted, y muchos más. Y la reactivity API no es tan diferente de eso. Tenemos refReactive para data reactive computed, watch, watch effect, unmounted, y muchos más. Pero la clave es que ahora puedo importar esas funciones directamente de Vue. No tengo que usar un componente de archivo único de Vue o un Mixon para usar esas herramientas. Puedo importarlas en cualquier archivo de JavaScript o TypeScript. Y luego la composition API nos proporciona una función de configuración donde puedo reunir toda la magia y usar todas esas poderosas herramientas de la Reactivity API en mi componente de Vue.

Así que hagamos un resumen de cómo escribir un componente en Vue 2 o en Vue 3 usando las opciones. Aquí tengo una plantilla con un párrafo con saludo y nombre completo. Si desplazo hacia abajo hasta mi bloque de script, puedo ver aquí que tengo una función de data, que está devolviendo un objeto con saludo y hola. Tengo propiedades para el primer nombre y el apellido. Y tengo una propiedad computada para el nombre completo, que me devuelve un primer nombre con un espacio y el apellido. Así que este es un componente con un solo propósito, que hace su trabajo bastante bien. Una nota lateral bastante divertida es que inicialicé este saludo aquí como un atributo de data reactivo, aunque en realidad nunca lo cambio y no necesito estos observadores en él de todos modos. Pero nunca estuve seguro de dónde poner estas constantes usando la options API. El problema en el que ahora quiero centrarme es que las unidades lógicas, si el componente está creciendo y creciendo, se dispersan por todo el bloque de script. Entonces, ¿qué quiero decir con esto? He preparado esta caja de arena de code aquí, y aquí también podemos ver que tenemos nuestro saludo y nombre completo para saludar al usuario.

Pero luego también mostramos los elementos del usuario donde hacemos un bucle y también proporcionamos una función de eliminar elemento para eliminar algo. Si desplazo hacia abajo hasta el bloque de script, ahora quiero que te centres en el orden de cómo las cosas están sucediendo. Tengo la función data que está ejecutando un objeto con el saludo y los elementos. Las propiedades tienen cosas del saludo. Una propiedad calculada con un nombre completo del saludo. Luego un método con la función de eliminar elemento de los elementos. Las categorías se vinculan a la forma en que el esqueleto de la vista, el objeto de la vista aquí está estructurado.

Todo en data está en data. Cada propiedad calculada está en propiedad calculada. Cada función está en el bloque de métodos. Ahora tenemos un punto donde tenemos ahora elementos de saludo, saludo, elementos de saludo. Están dispersos por todo el archivo. Esto es algo así como, crece y crece y crece, pareciéndose a esto. Por supuesto, puede ser una solución dividir el componente, pero centrémonos en que ya no funciona más, no podemos dividir más, y todavía tenemos estas líneas de code no realmente unidas y lo que la composition API nos proporciona es una posibilidad de agrupar unidades lógicas de nuevo, de modo que todo lo que está relacionado con el saludo, podemos imaginar que está en esta caja azul claro en la parte superior y todo lo que está relacionado con los elementos podemos imaginar que está unido en esta caja azul oscuro, casi negra aquí. Así que la composition API permite a los desarrolladores encapsular unidades lógicas en un solo archivo o compartirlas con otros.

Lo que quiero decir con eso es que cuando aprendí sobre la composition API hace un año, siempre se me vendió como esto es lo que debes hacer en lugar de mezclar. Usa la composition API para compartir funcionalidad. Es realmente poderoso. Pero luego empecé con U3, pensé, pero ¿realmente necesitamos compartir lógica para usar la composition API? Porque realmente me gusta cómo funciona la composition API, y en realidad me gusta usarla también sin compartir funcionalidad. Y esto es exactamente lo que haremos ahora. Así que he creado algunos archivos de Hola Mundo en este patio de recreo de componentes de archivo único de vista. Y el primero es una reimplantación de solo las cosas de saludo que vimos antes en U3 composition API. Así que aquí tenemos una plantilla con el saludo y el nombre completo. E importamos calculado de la vista. Si desplazo hacia abajo hasta las propiedades, veo el primer nombre y el apellido. Y aquí abajo tengo la función de configuración, que me está dando un saludo constante con Hola, y un nombre completo con una propiedad calculada, y luego devuelvo todo para pasarlo a mi plantilla. Lo que es bastante genial es que es solo JavaScript, ¿verdad? Me siento bien. En realidad, me sentí un poco sudoroso la primera vez que lo veo, la primera vez que lo vi. Así que aquí tenemos el saludo cons. Es solo un puro cons sin envolverlo en un objeto data, sin usar un ciclo de vida creado para inicializar constantes.

Solo una constante, y cuando tienen un nombre completo como propiedad calculada. Pero, por supuesto, también aquí la funcionalidad puede crecer un poco. Estamos cambiando a nuestro componente Hello World 2, y donde también tengo mis elementos, que también puedo eliminar. Hago un bucle sobre ellos en la plantilla y tengo mi método para eliminarlos. Importo computed y ref ahora de Vue, y si ahora me desplazo hasta el bloque de configuración, lo que podemos ver es la misma implementación para el saludo con un saludo y un nombre completo, y luego una unidad lógica de los elementos y un método para eliminar los elementos.

Y cuando comencé con Vue 3, todo el tiempo mi memoria muscular era como, oh sí, tengo que poner todo lo relacionado con data al principio, y luego todas las propiedades calculadas y luego todos los métodos y luego todos los hooks del ciclo de vida hasta que recordé, no, no, no, ya no tengo que usar esto. Ahora puedo vincular las unidades lógicas. Puedo simplemente juntarlas. Pero luego, por supuesto, mi componente fue creciendo un poco y me preguntaba, sí, ¿cómo realmente digo que estas cosas pertenecen juntas? ¿Tenemos un comentario como inicio del bloque de elementos y bloque de elementos? ¿Cómo logro esto? Así que comencé a refactorizar este componente un poco, la misma plantilla que vimos antes, pero ahora en la parte superior tenemos dos funciones diferentes, el uso de saludo y el uso de elementos, que encapsulan toda la funcionalidad en esas funciones donde tengo todo relacionado aquí y devuelvo las propiedades necesarias al exterior. Y si me desplazo hasta el bloque de configuración, ahora puedo ver que se está volviendo un poco más limpio si se estaba volviendo un poco desordenado y puedo externalizar toda esta lógica a algún otro lugar. Y aquí puedo ver claramente el saludo y los elementos de nombre completo y eliminar los elementos que provienen de esos dos composables.

Pero ahora el siguiente paso es, Hey, sería súper increíble si puedo usar los elementos de uso también en otro lugar, porque realmente necesito esta funcionalidad también en otro componente, lo que nos lleva a hello world cuatro, que también está refactorizando un poco más. Solo importo computed ahora de nuevo de Vue y no ref más, pero ahora también importo use items de use items. Cambiando a este archivo puedo ver import ref de Vue en la parte superior en un archivo JavaScript plano y la misma función con los use items que acabo de ver es ahora una función exportada archivo, que nos brinda toda la funcionalidad como un composable en nuestro componente de archivo único de Vue. Si me desplazo hasta el bloque de configuración puedo ver aquí de nuevo que tengo mi use greeting y el use item. Quiero darles una pequeña pista de lo que estoy haciendo aquí. Entonces, lo que puedes ver aquí es que al principio pensé que es súper genial usar la desestructuración de ECMAScript para obtener todo lo relacionado con los use items directamente en la plantilla. Una línea de code, esto se ve súper genial, pero luego un problema que me ocurrió es que No tengo ningún soporte de IDE aquí en este patio de juegos y si intento buscar el eliminar item, estoy perdido. No sé de dónde viene y por eso lo que tiendo a hacer es realmente ir al explícito camino para no usar la magia proporcionada por un lenguaje por mí, pero realmente diciendo explícitamente bien, importo esas cosas de allí y ahora puedo ver bien, el eliminar item viene de los use items y los use items vienen de este archivo. Así que ya escribimos nuestros primeros composables. Si buscas un poco más de inspiration, echa un vistazo a este repositorio de Git de Vue Use donde puedes encontrar muchos composables preescritos en typescript que puedes usar, funciones de Axios y así sucesivamente. Creo que también ya es tiempo de Hektoberfest, así que también si quieres involucrarte en el open source, este podría ser un punto de partida para ti. Bueno, pero ahora centrémonos en la state management. Entonces, ¿cómo pensé que funcionaba el estado cuando comencé con Vue 2 en 2017 o algo así. Primero hice el anti-patrón de la perforación de props. Así que usé props emit event handling para obtener algo del componente raíz a, es realmente como alquilar alquilar alquilar alquilar alquilar alquilar alquilar niños para simplemente emitir, emitir, emitir, emitir todo de nuevo. Esto no era realmente mantenible. Luego pensé que era inteligente y usé la raíz global, el dólar raíz para adjuntar variables a esta cosa de raíz global hasta que me di cuenta de que esto no funciona. Esto no es realmente reactivo. Creo que realmente no debería usar esto.

Tampoco se discutió realmente. Estaba realmente escondido en la API documentation que existe algo como una raíz global. Y luego me senté y pensé, bueno, la state management suena importante, suena difícil. Store suena difícil, observables, Vuex, no estoy seguro, pero voy a instalar Vuex ahora. Y realmente me sorprendió cómo esto me facilitó la creación de state management solo creando este archivo index.js. Y ya tenía algún estado. Fue una herramienta realmente poderosa porque era tan simple de usar que luego me permitió centrarme en las partes complejas de escribir code o encontrar soluciones para problemas más grandes.

Pero cuando estaba comenzando con Vue 3, pensé, hey, dame un segundo. Creo que puedo lograr la state management en realidad con composable. Y no fue porque Vue aún no estaba listo para Vue 3. Fueron bastante rápidos y había una guía de migración. Pero estaba interesado en lo que realmente podía lograr con composables. Quiero dar un paso más aquí. Y aquí tengo otro code sandbox, que probablemente se cargará pronto. Pero creo que también lo tengo precargado aquí. Sí, lo tengo.

Así que aquí quiero centrarme primero en los artículos del carrito, que vemos aquí. Y ahora tengo un ejemplo un poco más realista. Así que si recargo esto, puedes ver que habrá como tres segundos de carga porque normalmente obtengo los artículos de un servidor. Así que tengo tres segundos de carga y luego veo los artículos. Y aquí tengo un primer artículo. Así que lo que tengo que comprar a continuación son los huevos y luego tengo mi lista de artículos y aquí realmente uso ahora un estado con un flotante donde puedo establecer un estado de carga si todavía está cargando. Y en la parte del script ahora uso el hook desmontado donde puedo obtener los data. Así que yendo a la función de configuración ahora podemos ver el estado con los artículos y la carga. Y luego tengo la función importante aquí son los artículos de carga donde establezco isLoading en true. Como no tengo realmente un endpoint real al que pueda hablar, uso una función useSleep durante tres segundos. Y luego establezco algunos artículos ficticios, mis huevos y mi leche. Y si todo funciona bien, puedo establecer isLoading en false de nuevo. También tengo mi método para eliminar el artículo y tengo una propiedad calculada para el primer artículo y uso el hook del ciclo de vida desmontado para cargar los artículos tan pronto como se haya montado mi componente.

Ok, hasta ahora todo bien, tenemos algo que parece un estado pero no se siente realmente como state management de inmediato. Así que ahora quiero ir al componente raíz de la aplicación y cambiar a una alternativa diferente de esta aplicación y usar ahora dos componentes diferentes que nos proporcionan nuestros artículos. Así que si guardo esto y recargo, mientras tanto iré a la alternativa de artículos del carrito que se parece bastante a los favoritos. Así que ambos solo muestran nuestros artículos. Así que en la alternativa de artículos del carrito, me desplazo hacia abajo y en lugar de toda la lógica que vimos antes, ahora puedo ver que importo el composable de uso de artículos y obtengo todos los data necesarios del estado de carga de artículos, primer artículo, eliminar artículo y desmontado, llamo a la función de carga de artículos. Ahora puedo ver aquí mis tres segundos de carga y puedo ver dos veces mi lista de mis artículos. Y aquí quiero que te centres en la gestión del estado local, si abro el archivo, que pensé que había abierto antes, pero lo hago de nuevo para el composable. Ahora puedo ver que el estado aquí está fuera del componente de esta función de exportación.

Y el resto de la implementación es el mismo que antes. Simplemente se copió con una diferencia importante. Así que aquí importo adicionalmente la palabra clave de solo lectura de Vue para tener esta sensación de tienda de este composable, para tener la única fuente de verdad de lo que esperamos que se comporte nuestra tienda. Y ahora quiero poner el estado dentro de esta función exportada. Y si estoy haciendo esto y espero a que se recargue aquí. Ah, vamos. Están cargando durante tres segundos. Y tengo mi x, que puedo eliminar en ese estado local. Y aquí abajo puedo eliminar la leche fresca en esa gestión del estado local ya que tanto la alternativa de los artículos del carrito como los favoritos están utilizando estos artículos de uso, que tiene el estado inicializado dentro de esta función. Pero si piensas, hey, esto es un poco raro. Esto no es lo que espero de la gestión del estado. Espero que sea global. Esto se logra simplemente moviendo el estado en la parte superior de la exportación. Y volveré a recargar esto de nuevo. Y entonces puedes ver que, por lo tanto, acabo de crear el estado ahora una vez. Es global. No cambia. No lo inicializamos varias veces. Simplemente exportamos esta función varias veces. Entonces, después de instalar todas esas dependencias, verás que ahora puedo eliminar la X y se eliminarán dos veces. Así que están cargando y la gestión del estado global. El siguiente punto, si piensas, hey, esto no parece como esperaría que se viera una tienda realmente, también puedes usar una alternativa a esta alternativa. Puedes usar el patrón de proporcionar y verificar, que ya nos fue dado en Vue 2. Y este es este sandbox de código donde comienzo con el componente raíz app.view. Y puedes ver aquí que importo una tienda e importo un hola mundo y registro el componente hola mundo. Y proporciono la tienda. ¿Qué es la tienda? Echemos un vistazo a la tienda en el archivo index JS aquí. Así que aquí tengo ref calculado y solo lectura donde tengo mi estado, un primer artículo, una propiedad calculada que parece un getter. Luego tengo funciones que parecen un setter. Y solo por diversión, los llamé establecer artículos en esta sintaxis en mayúsculas. Y luego exporto por defecto el estado, que es de solo lectura, mis getters y mis setters. Así que esto debería sentirse más como la forma de hacer las cosas de Vue x-ray, la forma de la tienda. Y si reviso mis componentes, puedo ir a Hola Mundo donde en realidad no tengo ningún conocimiento de la tienda en absoluto. Pero registro el hijo uno y en el hijo uno, importo e inyecto de Vue. Desplázate hacia abajo aquí y yo inyecto la tienda y puedo usar la tienda en este componente hijo utilizando el patrón de proporcionar e inyectar y eliminar mis datos y mis artículos aquí porque finalmente los compré. Y esto también es una gestión del estado global. Así que si inspeccionara la tienda en algún otro componente, todavía funcionaría. Así que eso es todo sobre la gestión del estado en Vue 3 usando composables. Muchas gracias. Nos vemos luego.