1. Introducción a la Gestión del Estado
Hola, soy Eduardo, un desarrollador frontend y miembro del equipo central de Vue.js. Hoy, quiero discutir qué hay más allá de la gestión del estado y por qué importa. La gestión del estado no se limita a aplicaciones complejas. Depende de cómo se utiliza la tienda dentro de su aplicación. Pasar de una solución básica de gestión del estado global reactivo a una tienda es un pequeño paso con beneficios significativos, como la renderización del lado del servidor y los componentes de salida del estado. Un estado centralizado compartido por muchos componentes garantiza la escalabilidad.
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
2. Los Beneficios de Usar una Tienda como PNIA
Si sigues añadiendo cosas a tu estado, se volverá más grande y complejo. Usar un objeto global para la gestión del estado carece de experiencia de desarrollador y dificulta el seguimiento de los cambios. Las pruebas e implementación de funcionalidades adicionales se vuelven más desafiantes. Con una tienda como PNIA, estos problemas se resuelven y todo viene de serie.
para siempre. Si sigues añadiendo cosas, nuevas funciones, nuevas propiedades a tu estado, en algún momento ese estado y ese archivo se van a hacer más grandes. También puedes dividir varios archivos, pero vas a hacer que tu objeto crezca en complejidad demasiado. Y eso va a crear todo Si observas el estado o haces cualquier otra cosa complicada. También tienes una mejor
developer experience. Entonces, si estás usando un objeto global, no puedes inspeccionar, cambiar ese estado dentro de Dev Tools en algún lugar. Tienes que hacerlo manualmente a través del inspector de componentes. No tienes nada en la línea de tiempo. No sabes de dónde vienen los cambios en la tienda, en los estados Si quieres mantener tu estado mientras estás cambiando la tienda o tu solución de
state management, va a recargar la página, tendrás que manejar la sustitución en caliente tú mismo. Luego, si quieres hacer pruebas o necesitas probar tus componentes, vas a necesitar simular tu solución de
state management o probarla dos veces. Así que, tienes pruebas para tu
state management y también pruebas que dependen del comportamiento de la tienda en el componente. Y luego, si quieres manejar el almacenamiento local o deshacer/rehacer o cualquier otra funcionalidad que sea más genérica y que se aplique a cualquier tienda, cualquier solución de
state management, vas a tener que implementar eso por ti mismo, mientras que si tienes una tienda, todas estas cosas vienen de serie. No necesitas hacer nada. Así que por eso quiero hablarles un poco sobre cómo logramos estas cosas, y cuáles son estas cosas que existen cuando tú
3. Introducción a PNIA
¿Qué es PNIA? PNIA es un registro de todas las tiendas, el estado centralizado. Cuando creas un PNIA, tiene un objeto reactivo vacío como su estado. Cuando llamas a una uStore por primera vez, esa tienda se crea y su estado se añade dinámicamente al objeto PNIA. Este concepto de estado centralizado ha sido una parte fundamental de PNIA desde su inicio, incluso antes de que se lanzara Vue 3.
usa algo, una tienda como PNIA, y quizás consideres usar una. Entonces, en primer lugar, ¿qué es PNIA? Si tomas este archivo main.js, .ts que tienes en tu proyecto, verás que tienes esta aplicación, crea aplicación, y para añadir PNIA sólo necesitas importar este create PNIA de PNIA y luego crear lo que llamamos un PNIA, y usarlo. Y esta es una parte muy importante de usar PNIA porque ese objeto que tienes es el registro de todas las tiendas, el estado centralizado. Eso significa que cuando creas el PNIA hay una propiedad de estado en ese objeto que es prácticamente un objeto reactivo vacío. Y más tarde, cuando llamas a una uStore por primera vez, esa tienda va a ser creada, y su estado va a ser añadido dinámicamente a ese objeto vacío que creamos. Y lo mismo sucede con cualquier otra tienda que llamemos después de eso. ¿De acuerdo? Así que ese estado de PNIA va a crecer a medida que la aplicación, a medida que el usuario sigue utilizando la aplicación según lo necesites. Y tener este estado centralizado ha sido un concepto central desde PNIA en el principio, que fue hace unos dos años ya. Y eso fue incluso un mes antes de que
Vue 3 se lanzara por primera vez.
4. Introducción a la compatibilidad y limitaciones de PNIA
Cuando PNIA fue introducido por primera vez, solo era compatible con Vue 2.0. El proceso de desarrollo implicaba manipular la API no pública de las herramientas de desarrollo para mostrar limitaciones e información del estado. Duplicar los getters y las acciones para cada tienda creaba una huella de memoria más grande y un peor rendimiento. Además, no había ninguna herramienta de extensibilidad o interfaz de plugin, solo una API basada en opciones.
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
5. Soporte para Vue 2 y Vue 3 con Pinia
Hoy, con Pinia Vue 2.0, tenemos soporte para Vue 2 y Vue 3. Tenemos dos sintaxis diferentes: la API de opciones y la sintaxis de configuración. Soporte avanzado para devtools, inspección de la línea de tiempo por componente, modificación de tiendas, reemplazo de módulos en caliente, módulo de pruebas y extensibilidad segura por tipo con plugins.
en absoluto. Solo había una API basada en opciones. Hoy, con Pinia
Vue 2.0, tenemos soporte para
Vue 2 y
Vue 3. Tenemos dos sintaxis diferentes que podemos usar. Tenemos la API de opciones y tenemos la sintaxis de configuración, que verás más tarde. Tenemos un soporte muy avanzado para
devtools para la versión seis. Tenemos una línea de tiempo que podemos inspeccionar por componente. Podemos inspeccionar todas las tiendas. Podemos modificarlas. Tenemos reemplazo de módulos en caliente con una línea muy simple para tus tiendas. Tenemos un módulo de
testing que te permite crear un
testing pinia que bloquea cualquier tienda que sea utilizada por tus componentes sin que tengas que cambiar nada en tus componentes. Tienes un módulo siguiente que funciona para next dos y next tres. Y tienes extensibilidad segura por tipo con plugins, en la que no profundizaré, pero básicamente puedes añadir cualquier opción a tus tiendas, y luego añadir propiedades a la tienda, y pueden ser tipadas de forma segura. Y puedes usar el ID de la tienda, el estado
6. Introducción a la API central de Pina y los plugins
La API central de Pina es la misma que UX5, lo que facilita el cambio entre los dos. UX5 y Pina ya no tienen mutaciones, ofreciendo una versión menos verbosa de las tiendas. El estado puede ser directamente mutado en la tienda o modificado usando la función de parche. Pina también proporciona un reemplazo de Homebody de una sola línea y poderosos plugins que permiten la personalización y fusión de propiedades en las tiendas.
las acciones, lo que quieras. Es bastante poderoso. Y otra cosa sobre Pina, al menos, que es importante mencionar es que la API central, la forma en que defines las tiendas, es la misma que UX5. Así que UX5 llegó después de Pina, y ha influido mucho en el proceso y la API de UX5, y mantengo un ojo muy cercano porque participé mucho en esta
discussion. Así que me aseguro de que cualquier cosa que se añada a UX5, se añada a Pina de una manera que sea muy fácil en el futuro cambiar de uno a otro, especialmente para el núcleo de ello.
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.
7. La Función onAction y el Manejo de Errores
La función onAction es una característica poderosa utilizada por las DevTools para mostrar la línea de tiempo. También puede ser utilizada para enviar errores de las acciones a un servicio de informes como Sentry. Al llamar a una acción y usar onError, puedes recuperar el error y establecer los errores con el nombre de la acción que falló, junto con información adicional como el storeID y los argumentos pasados.
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.
8. Uso de PINIA y Demostración de Funcionalidad
Quiero mostrarles más funcionalidades como el siguiente plugin y el módulo de pruebas de PINIA. Permítanme mostrarles. Tengo un servidor en funcionamiento con mi aplicación. Tengo una página simple con una demostración de contador. Puedo incrementar el estado y añadir nuevas propiedades. Las herramientas de desarrollo me permiten inspeccionar y depurar la tienda de contadores, con una línea de tiempo que muestra los cambios.
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.
9. Inspección de Acciones y Mutaciones
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. Podemos inspeccionar las acciones e inspeccionar todas las mutaciones por grupo. También podemos ir a la gestión del estado y llegar al estado actual, modificarlo mientras la acción está ocurriendo. Si queremos agrupar varias modificaciones, digamos que queremos contar cuántas veces disminuimos el tiempo, cuántas veces disminuimos n.
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.
10. Uso de Funciones Componibles en el Estado
Dentro del estado, podemos llamar a cualquier función componible que tengamos, como watch, computed o wrap. Incluso podemos guardar el estado en el almacenamiento local utilizando la función useLocalStorage. Esto hace que la gestión del estado sea sencilla pero potente, permitiendo el uso de cualquier API de composición.
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.
11. Uso de la Sintaxis de Configuración y Exploración de la Funcionalidad
Y así tienes un estado, acciones, getters y opciones como la opción de rebote. La sintaxis de configuración utiliza una función en lugar de un objeto, lo que permite una mayor flexibilidad. Puedes usar funciones componibles, como la solicitud de uso de caché, e incluso agregar observadores. Navegar entre páginas muestra una carga de imagen inmediata y acceso a nuevas tiendas. Los errores también se pueden ver en la línea de tiempo e inspeccionar en las herramientas de desarrollo.
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.
12. Registro de Errores y Resultados de la Encuesta
Podemos registrar errores a través de las herramientas de desarrollo, eliminando la necesidad de registros de consola. Esto nos da acceso a la fuente de error real. Gracias a mis patrocinadores en Github por apoyar mi trabajo de código abierto. Considera apoyarme si te gusta lo que hago. Veamos los resultados de la encuesta. La respuesta correcta fue la menos votada, un dato curioso sobre la fruta de la piña. La piña es una multi-fruta, con múltiples flores y frutas que se fusionan, similar a cómo se crean las tiendas individualmente y se reúnen en una tienda centralizada.
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.
Uso de la Tienda Global y Organización de Archivos
El patrón para el uso de la tienda global en Pina implica crear una tienda para cada característica. Esto permite el almacenamiento de información que sobrevive a las páginas o requiere algún tipo de persistencia. También es útil para poner la lógica de negocio en una tienda, especialmente para las características que se utilizan en toda la aplicación. Con Pina, se recomienda crear un archivo por tienda para mantener la organización. Tienes la libertad de importar y usar las tiendas según sea necesario, siempre y cuando se utilicen dentro de las funciones de configuración o se pase la instancia de Binia.
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.
Comparación de rendimiento: Pinia vs V-rex
Al actualizar el estado de los componentes en tiempo real, V-rex puede ser lento. El rendimiento de Pinia en comparación con V-rex es incierto, ya que puede depender del escenario específico. La lentitud podría estar relacionada con propiedades animadas o observadores, pero se necesita más información para determinar la causa.
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.
Cambio Directo del Estado en Vuex
Puedes cambiar el estado directamente en Vuex sin usar mutaciones, pero este enfoque tiene limitaciones. Al eludir las mutaciones, no obtendrás la experiencia de DevTools y no podrás ver las mutaciones o cualquier cosa en las DevTools. Esto va en contra de la forma recomendada de usar Vuex y puede romper potencialmente cosas, como los plugins que no funcionan correctamente.
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.
Comparación de PNIA y Vuex5
Resumen de las tres principales razones para migrar de PNIA a Vuex5: API de plugins, experiencia avanzada de DevTools y soporte de TypeScript. PNIA es solo de 1.5 kilobytes debido a su simplicidad y enfoque en la experiencia de desarrollo. Gracias por unirte a nosotros, Eduardo.
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.
Vue.js London Live 2021
Comments