Todo Más Allá de la Gestión de Estado en Tiendas con Pinia

Hola a todos. Mi nombre es Eduardo. Vivo en París. Soy un desarrollador frontend y también un miembro del equipo central de Vue.js. Soy el autor de su enrutador y una pequeña biblioteca llamada Pina, que es una alternativa a Vue.js, una biblioteca de tiendas, también, de la que voy a hablar hoy. Lo que quiero hablarles no es solo sobre Pina sino qué hay más allá de la gestión del estado, qué importa en la gestión del estado más que el estado en sí. Pero primero, antes de incluso sumergirse en Pina o cualquier otra cosa, ¿qué es la gestión del estado? Es solo tener un objeto global con algunas funciones como esa, estado global. Tienes una función de registro que te permite cambiar un estado. ¿Es esto la gestión del estado? Y la gente te dirá que lo es. Y para ser honesto, prácticamente lo es, especialmente si solo agregas una llamada de función reactiva alrededor de ese objeto. Bueno, tienes un estado completamente válido, una solución de estado global que funciona para tu aplicación de vista tres o vista dos. Y esto sigue siendo la gestión del estado y algunas personas te dirán que la gestión del estado es algo que tienes y creas cuando tienes aplicaciones más grandes o de tamaño mediano a grande o cuando sabes que tu aplicación va a crecer y va a necesitar esa complejidad en el futuro. Pero esto es prácticamente como, no necesitas tener una aplicación compleja para necesitar o considerar el uso de una solución de gestión del estado o una tienda. Lo que define si debes o no usar una solución de gestión del estado es cómo se utiliza la tienda dentro de tu aplicación. Por ejemplo, ¿se utiliza tu estado en muchos lugares diferentes en las páginas o tu estado sale de estas páginas? ¿Necesitas tu estado cuando pasas de una página a otra? Tal vez tu aplicación solo tiene tres páginas, pero requieres que ese estado salga de todas las páginas. Y en ese escenario necesitas una gestión del estado. Y luego la siguiente pregunta que viene a tu mente, a mi mente es ¿debería dejar de tener esa solución de gestión del estado global reactiva básica o debería usar una tienda? Y la verdad es que hay un paso muy pequeño para empezar a usar una tienda. Solo necesitas usar la tienda definida con PNIA o UX5 y puedes mantener prácticamente las mismas cosas que tenías. El estado va a estar en un estado vertical. Luego vas a tener, uh, la variable de estado global se va a convertir en estas. Entonces es igual a algo. Entonces el cambio es muy simple. Y el costo en términos de tamaño, también es, uh, muy pequeño es como 1.5 kilobytes para PNIA. Um, pero por supuesto viene con muchas otras cosas, ¿verdad? Entonces, ¿realmente necesitas una tienda? ¿Qué te hace cambiar de opinión? ¿Qué significa pasar de, está bien, voy a dejar de usar mi solución variable y empezar a usar una tienda. Y hay algunas razones que te harán ir en esa dirección. La principal razón es la renderización del lado del servidor, uh, definitivamente es mucho más fácil de manejar con una tienda como PNIA o Vuex, um, pero hay muchas más, así que también tienes componentes de salida del estado. Uh, esto prácticamente sale de la caja para las soluciones de gestión del estado también. Pero, uh, dependiendo de cómo y dónde quieras instanciarlo, el estado global no es algo que siempre viene. Y luego tienes el estado centralizado compartido por muchos componentes. Entonces, si creas un solo estado global, eso no va a escalar

Esto significa que cuando existía PNIA, la primera versión de PNIA, solo era compatible con Vue 2.0. En ese momento, las cosas eran muy diferentes a ahora. Estaba llamando a funciones internas de las herramientas de desarrollo, V5. Así que básicamente estaba manipulando la API no pública de las herramientas de desarrollo para mostrar limitaciones y el estado en las herramientas de desarrollo donde se suponía que VueX debía mostrar su información. Tendría que duplicar los getters y las acciones cada vez que usábamos la tienda. Eso crearía una huella de memoria más grande y un peor performance cuando se trata de propiedades computadas. No había ninguna herramienta de extensibilidad en absoluto. No había interfaz de plugin

Y los principales cambios de UX5 y Pina en comparación con UX4, y lo que la mayoría de la gente notará es que ya no tenemos mutaciones. En general, tenemos una versión mucho menos verbosa de las tiendas. Las mutaciones desaparecen completamente. Así que tienes en su lugar el estado y luego puedes mutar el estado directamente en la tienda, pero esa no es la única forma, al menos para Pina de modificar el estado. También podemos usar una función, parche, que nos permite pasar un objeto parcial, un objeto de parche que aplicamos a la tienda. Y también podemos pasar una función para que podamos modificar el estado directamente. Esto es útil cuando interactuamos con colecciones como conjuntos, mapas o arrays.

Luego tenemos el reemplazo de Homebody de una sola línea, como decía antes, y que es bastante simplemente una línea que copias cada vez en la tienda y te olvidas de ella. Y luego tienes los plugins. Los plugins en Pimia, trato de hacerlos para darles tanto poder como sea posible. De hecho, la implementación de las herramientas de desarrollo para Pimia es un plugin de Pimia. Puedes hacer muchas cosas. Así que los plugins para Pimia son simplemente funciones y reciben la aplicación, la instancia de Pimia la tienda y sus opciones, las opciones con las que se definió la tienda. Y normalmente haces tres cosas posibles diferentes. Puedes llamar a una función de suscripción que se va a disparar cada vez que mutas el estado de tu tienda, pero también tiene en cuenta los parches. Así que si haces un parche con una función o con un objeto, sólo va a disparar uno diferente de un reloj. Luego tenemos una acción, que se dispara antes de que se ejecute una acción y te permite controlar el resultado. Y si hay un error o si tiene éxito, puedes hacer otras cosas. Y luego la funcionalidad más simple pero aún así tan poderosa es devolver un objeto en los plugins. Estos objetos que devuelves en los plugins se van a fusionar en la tienda. Verás, así que esto te permite sobrescribir o añadir nuevas propiedades a cada tienda. También puedes filtrar por ID si quieres. También puedes leer desde las opciones. Puedes hacer muchas cosas. Y este es un ejemplo muy simple es que puedes simplemente añadir el router a cada una tienda y luego en las acciones, puedes simplemente llamar a these.router. Y eso es todo. Obtienes el router, puedes empujar, puedes reemplazar, puedes comprobar la ruta actual si quieres.

Pero una de mis favoritas es la onAction. La onAction parece muy simple y lo es para muchos casos, pero es muy poderosa. Así es como las DevTools la utilizan detrás de escena para mostrar la línea de tiempo que vamos a ver en un momento. Pero por ejemplo, este es el code que necesitas para enviar errores de tus acciones a nuestro servicio de informes como Sentry o cualquier otro. Solo tienes que llamar a una acción, y luego en onError, obtienes el error y estableces los errores con el nombre de la acción que falló. También puedes enviar el storeID, que olvidé poner allí, y luego los argumentos que se pasaron.

Y quiero mostrarles, hay mucho más como el siguiente plugin y el módulo de testing de PINIA que quiero mostrarles, pero quería darles una idea de cómo es usar PINIA, cómo se ve con todas estas funcionalidades. Así que permítanme mostrarles.

Así que tengo un servidor en funcionamiento. Muy bien. Así que tengo un servidor en funcionamiento aquí con mi aplicación. Y tengo una página, una página muy simple, donde tengo una demostración de contador. Esto es justo como pueden ver. Así que tenemos esto en funcionamiento. El contador de demostración, tengo un contador de usuario que estoy importando de este archivo justo aquí. Y simplemente estoy usando el contador y estoy llamando directamente a contador. n++ y estoy mostrando el estado completo del contador.

Y entonces, el contador de demostración, lo que tengo es simplemente una tienda definida. Tengo mi estado inicial aquí. Y tengo el fragmento de código de reemplazo de módulo caliente de code. Y lo que quiero mostrarles es que aquí puedo incrementar el estado, pero también puedo añadir nuevas propiedades. ¿OK? Y si añado una nueva propiedad, aparecerá. Dejará el estado antiguo, pero se añadirá al estado de la tienda. Necesito eliminarlo porque también va a desaparecer del estado. Así que por supuesto, esto funciona con todo lo demás, los getters, las acciones. Y de nuevo, quiero mostrarles un poco de las herramientas de desarrollo que tenemos y lo genial que es trabajar con una tienda y debug tus aplicaciones, gracias a las herramientas de desarrollo. Así que aquí tengo un incremento, puedo incrementar mi estado. Y si abro las herramientas de desarrollo aquí, puedo inspeccionar el contador, y puedo ver aquí que tengo mi estado. Puedo incrementarlo. Puedo cambiarlo si quiero. Y aquí tengo una línea de tiempo. Y si bajo, puedo ver que tengo una pina. Y si incremento, puedo ver pequeños puntos amarillos. Y si los selecciono, déjalo ir, podemos ver tres puntos diferentes que tenemos, que están aquí. Y lo que estoy haciendo. Así que aquí, la rotación va de 102 a 103 en la clave N, la clave del contador.

Entonces, lo que voy a hacer, voy a tener una acción aquí. Voy a tener una acción que va a decrementar lo anterior hasta que llegue a cero. Esta va a ser una acción asíncrona. Y voy a hacer mientras que este punto N es mayor que este cero, voy a decrementar, y luego voy a esperar un pequeño retraso de tiempo de 200 milisegundos.

Eso es todo, esa es la acción, es muy simple. Ahora lo que voy a hacer es añadir un botón aquí voy a llamar a counter dot decrease to cero. Y también tenemos autocompletado, bastante genial. Aquí estamos, disminuir a cero. Sólo cambiaremos un poco el texto. Muy bien, aquí sólo estamos haciendo 200 porque es más rápido que esperar un segundo. Lo que queremos ver es cómo los cambios de n pueden ser inspeccionados uno por uno en las herramientas de desarrollo.

Así que aquí, sólo les mostraré la línea de tiempo, hemos ido a borrar, y de nuevo a disminuir a cero. Y como pueden ver aquí, empiezan a aparecer, pueden ver cómo n empezó a disminuir y lo que es interesante, también puedo llamar a incrementar, y aparecen justo debajo y también puedo tener varias acciones corriendo en paralelo como pueden ver hasta que n llega a cero. Y luego podemos inspeccionar las acciones e inspeccionar todas las mutaciones por grupo. Así que aquí, si cambio a grupo, puedo ver que esta acción aquí, tenemos un total de 74 eventos y tardó 40 segundos, 14 segundos perdón, en terminar. Los otros son un poco más cortos, así que tenemos menos eventos y tardaron menos tiempo. Y cada vez podemos ver el nuevo valor y el valor antiguo. Así que eso es bastante genial. Y lo que es interesante es que también podemos ir a la state management aquí, llegar al estado actual así que podemos ver todos los estados, podemos cambiarlos desde allí. Podemos hacer eso mientras la acción está ocurriendo, podemos modificar eso en cualquier momento. Así que aquí si modifico el valor y voy a 50, pueden ver que cambió de inmediato aquí. No necesitamos hacer nada más. Y en la línea de tiempo, tenemos los eventos ocurriendo al mismo tiempo cuando se registran. Además, si queremos agrupar varias modificaciones, digamos que queremos contar cuántas veces disminuimos el tiempo, cuántas veces disminuimos n. Así que esto significa que disminuir el tiempo incrementa, así que aparece aquí. Podemos incrementar unas cuantas veces, disminuimos a cero. Y ahora si reviso las herramientas de desarrollo, puedo ver que tengo más mutaciones. Tengo una para cambiar n aquí y una para cambiar los tiempos de disminución, que tiene un tipo por cierto. Déjame ver el tiempo. Ahí lo tienen.

Así que una cosa que puedo hacer en su lugar es usar el componente de plataforma. Así que haremos esto como estado... Vaya. Y luego aquí podemos hacer lo que queramos. Y esto dirigirá la modificación. Así que aquí vamos a hacerlo unas cuantas veces y agotar. Ahora vamos a comprobar esto y podemos ver que tenemos menos eventos. Podemos inspeccionar y ver los valores antiguos y los nuevos. 5 y 0 para n. Esa fue la última.

Vale. El primero parece 5 y 4. Ahí lo tienes. Y una cosa que es muy interesante y que mucha gente no sabe, es que dentro del estado podemos llamar a cualquier función componible que tengamos. Podemos llamar a watch, podemos llamar a computed, wrap, lo que queramos. Así que si quiero guardar el estado en el almacenamiento local, puedo simplemente usar la función useLocalStorage. Y puedo simplemente reemplazar useLocalStorage counter demo. Y puedo darle un valor inicial de cero. Así que puedo usar eso. Voy a recargar la página porque acabo de cambiar la naturaleza de esta propiedad de estado así que probablemente necesito recargar la página. Tenemos un cero, si implementamos aquí y recargo la página, podemos ver que el ocho es el mismo. No ha cambiado. Y todo lo demás funciona igual. Así que muy simple pero tan potente. Puedes usar cualquier composition API directamente desde aquí y todo lo demás funciona igual. Correcto. Es solo este estado así que todavía puedes inspeccionarlo aquí. Todavía puedes cambiarlo y se adaptará. Muy bien. Así que esta es la versión de opción de una tienda.

Y así tienes un estado, tienes las acciones, también tienes los getters. Y puedes agregar otras propiedades a las opciones si quieres. Por ejemplo, puedes tener la opción de rebote que te permite definir qué acciones quieres rebotar. Pero hay otra versión de la sintaxis que podemos usar. Y esa es la sintaxis de configuración.

Así que la sintaxis de configuración, tengo un ejemplo diferente para eso. Es un poco más largo. No puedo repasar todo. Pero en lugar de tener un objeto, como tenemos aquí, tenemos una función. Esta función es la misma que la función de configuración en un componente. Y simplemente creas lo mismo que en un componente, descanso, calculado, funciones. Utilizas tu componible de la forma que quieras. Por ejemplo, esta es una solicitud de uso de caché. Es similar a un obsoleto que evaluamos. Hacemos caché la primera vez, y todavía hace la solicitud en segundo plano. Así que uno muy, muy simple. Y luego tenemos algunas funciones. E incluso puedes hacer observadores. Así que eso también es bastante genial.

Aquí, por ejemplo, si navego unas cuantas veces, obtengo algunas imágenes. Y luego, cuando vuelvo, puedes ver que obtengo la imagen de inmediato. Y en segundo plano, está haciendo una llamada a través de la red de todos modos. Y aquí puedes ver que esta tienda apareció. Todavía tenemos un contador de demostración, que no ha cambiado. Pero tan pronto como entramos en esta página, obtuvimos acceso a esta nueva tienda. Como puedes ver aquí, podemos ver cómo cambia de un día a otro. También podemos tener los errores, por cierto, que no mostré. Pero no creo que lo tenga implementado aquí para mostrarte. Podemos ver los errores en la línea de tiempo también. Y podemos inspeccionarlos de inmediato en las herramientas de desarrollo, lo cual es bastante genial.

También podemos registrarlos. Así que ni siquiera necesitamos tener registros de console en ningún lugar, porque podemos hacer eso a demanda a través de las herramientas de desarrollo. Así que puedes concentrarte en agregar solo depuradores o puntos de interrupción una vez que quieras depurar eso. Pero puedes simplemente registrar desde las herramientas de desarrollo cualquier cosa que quieras.

Usualmente tenemos, solo para mostrarte. Aunque aquí no es muy importante, pero aquí puedes registrarlo en la console. Y eso te da acceso al error real de donde proviene.

Eso es todo. Eso es todo lo que quería mostrarte para la demostración. Quiero agradecer a los patrocinadores que tengo en Github. Patrocinadores que me permiten trabajar la mayor parte del tiempo en un código abierto. Así que si te gusta lo que hago en el Voxer, en el sistema UX, en Kinea, o lo que sea, por favor considera apoyarme, especialmente si eres una empresa. Hay expertos, por cierto, en hacer eso. Y también quiero agradecerte por escucharme. Espero que hayas aprendido algo y que vayas a probar Kinea pronto. Veamos los resultados de la encuesta.

Ya que había una respuesta técnicamente correcta a esto, ¿es eso correcto? Sí. Sí, hay una respuesta correcta. ¿Y cuál fue la respuesta correcta? Así que la respuesta correcta es la menos votada. Es un dato curioso sobre las frutas, más específicamente la fruta de la piña. Las otras eran una trampa. El manga era claramente una gran trampa. Ni siquiera conozco ningún manga de cáncer de piña, pero pensé que era divertido. Quería votar por eso solo porque sonaba divertido.

Bien, ¿cuál es el dato curioso? Así que está escrito en la docs, la piña es en realidad una multi-fruta. Así que florece como múltiples flores, y luego tienes múltiples frutas saliendo de las flores. Y luego se fusionan para convertirse en una gran fruta, que es la piña. Así que esto es bastante parecido a las tiendas. Creas tiendas individualmente, y al final se reúnen en una gran tienda centralizada, que es mi pina, básicamente. Muy bien, vale.

Supongo que es hora de hacer preguntas. La primera pregunta viene de Organized Chaos. ¿Cuál es el patrón para el uso de la tienda global? ¿Y también sugiere Pina dividir las tiendas para diferentes pistas de componentes como Vuex? Estamos asumiendo que las pistas de componentes aquí significan simplemente componentes relacionados, relacionados con las características. Si estamos equivocados acerca de eso, Organized Chaos, lo siento. Estoy tratando de encontrar una pregunta escrita para poder leerla. Vale, ahí vamos. Espera, no puedo encontrarla. Entonces, realmente no hay... Divides, creas una tienda para una característica. Entonces, como digo en la masterclass, normalmente estás poniendo la información de la tienda que sobrevive a las páginas o que requiere algún tipo de... Siempre solo usa una aplicación OAuth2 por lo que no tiene necesariamente que sobrevivir a una página. A veces también es más fácil poner la lógica de negocio en una tienda por lo que podría ser una característica específica. Pero especialmente con una composition API, eso realmente no es necesario. Entonces, a veces, para alguna lógica de negocio específica, podría ser útil especialmente si se utiliza en toda la aplicación como authentication o en algunos sitios web de e-commerce donde el carrito puede volverse muy complicado. Entonces, idealmente con Binia, creas un archivo por tienda por lo que no creas múltiples tiendas en un archivo. Eso es todo. No hay nada más. Entonces eres libre de hacer lo que quieras, para importarlos, lo que quieras, siempre y cuando se utilicen dentro de las funciones de configuración o pases la instancia de Binia como se muestra en la documentation.

Bien, la siguiente pregunta viene de V-rex. Al actualizar el estado de decenas a cientos de componentes en tiempo real como reacción a una entrada de usuario o para animation, notamos que V-rex es extremadamente lento. ¿Cómo es el performance de Pinia en comparación con V-rex? Entonces creo que la persona está hablando de V-rex 4 o V-rex 3, probablemente. No creo que V-rex tenga algo que ver con la slowness en este caso de cumplir con estos escenarios. Por lo tanto, Pinia no debería cambiar eso. Y tal vez Pinia sea más rápido que V-rex 4 y V-rex 5 será más rápido que V-rex 4 también. Pero no creo que la animation sea lenta. Sí, probablemente no se trate de data. Se trata más de las propiedades animadas y tal vez algunos observadores están viendo. Es simplemente imposible saberlo sin eso, en realidad.

Bueno, siguiente pregunta. Viene de Ricky Yu. Ya puedo cambiar el estado directamente en Vuex. Simplemente evito las mutaciones. ¿Qué tiene de malo eso, además de que todos me dicen que está mal hacerlo? No obtendrás la experiencia de DevTools. No podrás ver las mutaciones o cualquier cosa en las DevTools. Así que eso tiene un gran impacto en Vuex. Eso es todo. Bueno, realmente podríamos estar haciendo eso. Quiero decir, las cosas también podrían salir mal. Han pasado dos años desde que no he usado un Vuex clásico, un Vuex basado en mutaciones. Así que no recuerdo si hay otras cosas que podrían romperse. Probablemente los plugins no funcionarán, como si tuvieras otros plugins que no react así que es simplemente va en contra de la forma de hacer las cosas. Así que las cosas van a romperse. Eso tiene sentido.

Bien, también de Ricky Yu, resume las tres principales razones para migrar de PNIA a Vuex5. Así que danos tu discurso de ascensor. No creo que Vuex5 esté allí todavía, así que no hay nada con qué comparar. Hay una rama experimental. Así que imagina que había una y que ha implementado la API que está en el RFC. Estoy bastante seguro de que Kia ya tiene una versión funcional, la hemos visto juntos. Pero las cosas que diferencian hoy a PNIA de Vuex5 es la API de plugins que es existente y más avanzada. La experiencia de DevTools que también es más avanzada. No estoy seguro de qué experiencia de DevTools existe para Vuex5. El módulo de testing, por lo que hay un módulo oficial de testing para PNIA, en realidad también hice la versión de Vuex. Y también hay un plugin de Nuxt. Y tiene un lindo logotipo, tiene un logotipo. Sabes, eso es un gran punto de venta, diría. Ahora la verdadera razón son los plugins y DevTools, diría. Y si quieres un tercero, sería el soporte de TypeScript. Espera, ¿realmente tienes el mismo soporte de TypeScript? ¿Cuál era la otra cosa? El testing, diría.

Bien, la siguiente pregunta viene del Sr. Backend. ¿Cómo es que PNIA solo tiene un kilobyte? Porque es muy simple. En realidad, la parte más grande son las DevTools. Ahora es 1.5. Creo. Oh, sí. Aclarémoslo. Es 1.5. Sí, técnicamente, ya no es uno, ¿verdad? Solía ser uno. Pero a medida que fui añadiendo características como los plugins, y tanto la configuración como la sintaxis de opción, ahora es 1.5. Aún así, muy, muy pequeño de todos modos. Uh, no... No hace mucho. ¿Qué puedo decir? Porque todo es dev... Hay un gran enfoque en el desarrollo también, experiencia. Así que todo lo que es la experiencia de desarrollo se elimina en producción. Genial, muy cool.

Bueno, uh, es hora para nosotros. Así que muchas gracias por unirte a nosotros, Eduardo. Gracias.