Todo lo que va más allá de la gestión del estado en las stores con Pinia

Rate this content
Bookmark

Cuando pensamos en Vuex, Pinia o stores en general, a menudo pensamos en la gestión del estado y los patrones Flux, pero no solo las stores no siempre siguen el patrón Flux, ¡hay mucho más sobre las stores que las hace valiosas de usar! Plugins, Devtools, renderizado en el servidor, integraciones con TypeScript... Vamos a sumergirnos en todo lo que va más allá de la gestión del estado con Pinia, con ejemplos prácticos sobre plugins y Devtools para aprovechar al máximo tus stores.

34 min
20 Oct, 2021

Video Summary and Transcription

La gestión del estado no se limita a aplicaciones complejas y la transición a una store ofrece beneficios significativos. Pinia es una solución centralizada de gestión del estado compatible con Vue 2 y Vue 3, que ofrece soporte avanzado de devtools y extensibilidad con plugins. La API principal de Pinia es similar a Vuex, pero con una versión menos verbosa de las stores y plugins potentes. Pinia permite inspeccionar fácilmente el estado, manejar errores y realizar pruebas. Se recomienda crear un archivo por store para una mejor organización y Pinia ofrece un rendimiento más eficiente en comparación con V-rex.

Available in English

1. Introducción a la Gestión del Estado

Short description:

Hola, soy Eduardo, un desarrollador frontend y miembro del equipo principal de Vue.js. Hoy quiero hablar sobre lo que está más allá de la gestión del estado y por qué es importante. La gestión del estado no se limita a aplicaciones complejas. Depende de cómo se use la tienda dentro de tu aplicación. La transición de una solución básica de gestión del estado reactivo global a una tienda es un pequeño paso con beneficios significativos, como el renderizado en el lado del servidor y los componentes de salida de 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 soy miembro del equipo principal de Vue.js. Soy el autor de su enrutador y de una pequeña biblioteca llamada Pina, que es una alternativa a Vue.js, una biblioteca de tiendas, de la que hablaré hoy. Lo que quiero hablar no es solo de Pina, sino de lo que está más allá de la gestión del estado, lo que importa en la gestión del estado más que el propio estado. Pero primero, antes de sumergirnos en Pina o cualquier otra cosa, ¿qué es la gestión del estado? Es simplemente 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 gestión del estado? Y la gente te dirá que sí. Y para ser honesto, lo es en gran medida, especialmente si solo agregas una llamada de función reactiva alrededor de ese objeto. Bueno, tienes una solución de estado global completamente válida que funciona para tu aplicación de Vue 3 o Vue 2. Y esto sigue siendo 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 medianas a grandes 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 usar 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 usa 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 tenga tres páginas, pero requieres ese estado para salir 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 básica de gestión del estado global reactivo o debería usar una tienda? Y la verdad es que hay un paso muy pequeño para usar una tienda. Solo necesitas usar una tienda definida con PNIA o Vuex y puedes mantener prácticamente las mismas cosas que tenías. El estado estará en un estado vertical. Luego tendrás la variable de estado global que se convertirá en esto. Así que es igual a algo. El cambio es muy simple. Y el costo en términos de tamaño también es muy pequeño, como 1.5 kilobytes para PNIA. 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 decir, `Voy a dejar de usar mi solución de variables y empezar a usar una tienda`? Y hay algunas razones que te llevarán en esa dirección. La razón principal es el renderizado en el lado del servidor, definitivamente es mucho más fácil de manejar con una tienda como PNIA o Vuex, pero hay muchas más, también tienes componentes de salida de estado. Esto es prácticamente algo que viene de serie en las soluciones de gestión del estado también. Pero, dependiendo de cómo y dónde quieras instanciarlo, el estado global no es algo que siempre esté presente. 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

Short description:

Si sigues agregando cosas a tu estado, este se volverá más grande y complejo. El uso de un objeto global para la gestión del estado carece de experiencia para el desarrollador y dificulta el seguimiento de los cambios. La prueba e implementación de funcionalidades adicionales se vuelve más desafiante. Con una tienda como PNIA, estos problemas se resuelven y todo viene incluido.

para siempre. Si sigues agregando cosas, nuevas funciones, nuevas propiedades a tu estado, en algún momento ese estado y ese archivo se volverán más grandes. También puedes dividir en múltiples archivos, pero harás que tu objeto crezca en complejidad demasiado. Y eso creará todos Si observas el estado o haces cualquier otra cosa complicada. También tienes una mejor experiencia para el desarrollador. Entonces, si estás usando un objeto global, no puedes inspeccionar ni cambiar ese estado dentro de las herramientas de desarrollo en ningún lugar. Debes 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 cambias la tienda o tu solución de gestión del estado, se recargará la página, tendrás que manejar la sustitución en caliente tú mismo. Luego, si quieres probar o necesitas probar tus componentes, deberás simular tu solución de gestión del estado o probarla dos veces. Entonces, tienes pruebas para tu gestión del estado 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 gestión del estado, tendrás que implementar eso por ti mismo, mientras que si tienes una tienda, todas estas cosas vienen incluidas. No necesitas hacer nada. Por eso quiero hablar un poco sobre cómo logramos estas cosas y qué son estas cosas que existen cuando tienes una tienda.

3. Introducción a PNIA

Short description:

¿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, se crea esa tienda y su estado se agrega dinámicamente al objeto PNIA. Este concepto de estado centralizado ha sido parte fundamental de PNIA desde su inicio, incluso antes de que se lanzara Vue 3.

usar algo, una tienda como PNIA, y tal vez consideres usar una. Entonces, primero que nada, ¿qué es PNIA? Si tomas ese archivo main.js, archivo .ts que tienes en tu proyecto, verás que tienes esta app, create app, y para agregar PNIA solo 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 básicamente un objeto reactivo vacío. Y más adelante, cada vez que llames a una uStore por primera vez, se creará esa tienda y su estado se agregará 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? Entonces, ese estado de PNIA irá creciendo a medida que la aplicación, a medida que el usuario siga usando la aplicación según sea necesario. Y tener este estado centralizado ha sido un concepto fundamental desde el principio de PNIA, que fue hace aproximadamente 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

Short description:

Cuando se introdujo PNIA por primera vez, solo era compatible con Vue 2.0. El proceso de desarrollo implicaba realizar trucos con la API no pública de las herramientas de desarrollo para mostrar limitaciones e información de estado. Duplicar los getters y acciones para cada tienda creaba una mayor huella de memoria y un peor rendimiento. Además, no existía una herramienta de extensibilidad ni una interfaz de complemento, solo una API basada en opciones.

Esto significa que cuando PNIA se introdujo por primera vez, solo era compatible con Vue 2.0. En ese momento, las cosas eran muy diferentes de ahora. Estaba llamando a funciones internas de las herramientas de desarrollo, V5. Así que básicamente estaba haciendo trucos con 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. Tenía que duplicar los getters y acciones cada vez que usábamos una tienda. Eso creaba una mayor huella de memoria y un peor rendimiento cuando se trataba de propiedades computadas. No existía ninguna herramienta de extensibilidad. No había una interfaz de complemento

5. Compatibilidad con Vue 2 y Vue 3 con Pinia

Short description:

Hoy en día, con Pinia Vue 2.0, tenemos compatibilidad con Vue 2 y Vue 3. Tenemos dos sintaxis diferentes: la API de opciones y la sintaxis de configuración. Soporte avanzado de herramientas de desarrollo, inspección de línea de tiempo por componente, modificación de tiendas, reemplazo de módulos en caliente, módulo de pruebas y extensibilidad segura de tipos con complementos.

No había soporte en absoluto. Solo había una API basada en opciones. Hoy en día, 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 adelante. Tenemos un soporte muy avanzado de herramientas de desarrollo 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 de código muy simple para tus tiendas. Tenemos un módulo de pruebas que te permite crear fácilmente una pinia de pruebas 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 de tipos con complementos, en los que no entraré en detalle, pero básicamente puedes agregar cualquier opción a tus tiendas y luego agregar propiedades a la tienda y se pueden tipar de forma segura. Y puedes usar el ID de la tienda, el estado

6. Introducción a la API principal de Pinia y complementos

Short description:

La API principal de Pinia es la misma que UX5, lo que facilita el cambio entre ambas. UX5 y Pinia ya no tienen mutaciones, lo que ofrece una versión menos verbosa de las tiendas. El estado se puede mutar directamente en la tienda o modificarse utilizando la función patch. Pinia también proporciona una sustitución de Homebody en una sola línea y potentes complementos que permiten la personalización y fusión de propiedades en las tiendas.

las acciones, cualquier cosa que desees. Es bastante poderoso. Y otra cosa sobre Pinia, al menos, que es importante mencionar es que la API principal, la forma en que defines las tiendas, es la misma que UX5. UX5 vino después de Pinia, y ha influido mucho en el proceso y la API de UX5, y mantengo un ojo muy cercano porque participé mucho en esta discusión. Así que me aseguro de que cualquier cosa que se agregue a UX5, se agregue a Pinia de manera que sea muy fácil en el futuro cambiar de uno a otro, especialmente para su núcleo.

Y los principales cambios de UX5 y Pinia en comparación con UX4, y lo que la mayoría de las personas notarán es que ya no tenemos mutaciones. En general, tenemos una versión mucho menos verbosa de las tiendas. Las mutaciones desaparecen por completo. Entonces, en su lugar, tienes el estado y luego puedes mutar el estado directamente en la tienda, pero esa no es la única forma, al menos para Pinia, de modificar el estado. También podemos usar una función, patch, 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 modificar el estado directamente. Esto es útil cuando interactuamos con colecciones como conjuntos, mapas o matrices.

Luego tenemos la sustitución de Homebody en una sola línea, como dije antes, y que es bastante solo una línea que copias cada vez en la tienda y te olvidas de ella. Y luego tienes los complementos. Los complementos en Pinia, intento darles la mayor potencia posible. De hecho, la implementación de las herramientas de desarrollo para Pinia es un complemento de Pinia. Puedes hacer muchas cosas. Entonces, los complementos para Pinia son solo funciones y reciben la aplicación, la instancia de Pinia, la tienda y sus opciones, las opciones con las que se definió la tienda. Y generalmente haces tres cosas diferentes posibles. Puedes llamar a una función de suscripción que se activará cada vez que mutas el estado de tu tienda, pero también tiene en cuenta los parches. Entonces, si haces un parche con una función o con un objeto, solo se activará uno de manera diferente a una observación. Luego tenemos una acción, que se activa 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í poderosa es devolver un objeto en los complementos. Estos objetos que devuelves en los complementos se fusionarán en la tienda. Verás, esto te permite anular o agregar nuevas propiedades a cada tienda individual. 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 de que puedes agregar simplemente el enrutador a cada tienda y luego en las acciones, simplemente puedes llamar a this.router. Y eso es todo. Obtienes el enrutador, puedes navegar, puedes reemplazar, puedes verificar la ruta actual si quieres.

7. La función onAction y el manejo de errores

Short description:

La función onAction es una característica poderosa utilizada por las herramientas de desarrollo para mostrar la línea de tiempo. También se puede utilizar para enviar errores desde las acciones a un servicio de informes como Sentry. Al llamar a una acción y utilizar onError, puedes obtener el error y establecer los errores con el nombre de la acción fallida, junto con información adicional como el storeID y los argumentos pasados.

Pero una de mis favoritas es la función onAction. La función onAction parece muy simple y lo es para muchos casos, pero es muy poderosa. Esto es lo que utilizan las DevTools detrás de escena para mostrar la línea de tiempo que veremos en un momento. Por ejemplo, este es el código que necesitas para enviar errores desde tus acciones a nuestro servicio de informes como Sentry o cualquier otro. Simplemente llamas a una acción y luego, utilizando 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. Usando PINIA y Demostrando Funcionalidad

Short description:

Quiero mostrarte más funcionalidades como el siguiente complemento y el módulo de pruebas de PINIA. Permíteme mostrarte. Tengo un servidor en ejecución con mi aplicación. Tengo una página simple con una demostración de contador. Puedo incrementar el estado y agregar nuevas propiedades. Las herramientas de desarrollo me permiten inspeccionar y depurar la tienda de contador, con una línea de tiempo que muestra los cambios.

Y quiero mostrarte, hay mucho más como el siguiente complemento y el módulo de pruebas de PINIA que quiero mostrarte, pero quería darte una idea de cómo usar PINIA, cómo se ve con todas estas funcionalidades. Así que permíteme mostrarte.

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

Y así, 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 en caliente. Y lo que quiero mostrarte es que aquí puedo incrementar el estado, pero también puedo agregar nuevas propiedades. ¿De acuerdo? Y si agrego una nueva propiedad, aparecerá. Mantendrá el estado anterior, pero se agregará al estado de la tienda. Necesito eliminarlo porque también desaparecerá del estado. Por supuesto, esto funciona con todo lo demás, los getters, las acciones. Y nuevamente, quiero mostrarte un poco de las herramientas de desarrollo que tenemos y lo genial que es trabajar con una tienda y depurar 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 un pina. Y si incremento, puedo ver pequeños puntos amarillos. Y si los selecciono, los suelto, podemos ver tres puntos diferentes que tenemos, que son 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. Inspecting Actions and Mutations

Short description:

Voy a tener una acción que va a decrementar el valor anterior hasta llegar a cero. Esta será una acción asíncrona. Podemos inspeccionar las acciones y todas las mutaciones por grupo. También podemos acceder a la gestión del estado y ver el estado actual, modificarlo mientras ocurre la acción. Si queremos agrupar múltiples modificaciones, por ejemplo, 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 el valor anterior hasta llegar a cero. Esta será una acción asíncrona. Y voy a hacer mientras this.N sea mayor que cero, voy a decrementar, y luego esperar una pequeña demora de 200 milisegundos.

Eso es todo, esa es la acción, es muy simple. Ahora lo que voy a hacer es agregar un botón aquí y llamar a counter.decrease a cero. Y también tenemos autocompletado, bastante genial. Ahí está, decrease to zero. Solo cambiaré un poco el texto. Muy bien, aquí estamos usando 200 porque es más rápido que esperar un segundo. Lo que queremos ver es cómo se pueden inspeccionar los cambios de n uno por uno en las herramientas de depuración.

Entonces aquí, solo te mostraré la línea de tiempo, hemos ido de claro, y nuevamente a decrease to zero. Y como puedes ver aquí, comienzan a aparecer, puedes ver cómo n comenzó a disminuir y lo que es interesante, también puedo llamar a increment, y aparecen justo debajo y también puedo tener múltiples acciones ejecutándose en paralelo, como puedes ver, hasta que n llegue a cero. Y luego podemos inspeccionar las acciones y todas las mutaciones por grupo. Entonces aquí, si cambio a grupo, puedo ver que esta acción aquí, tenemos un total de 74 eventos y tardó 40 segundos, perdón, en terminar. Los demás 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 anterior. Así que eso es bastante genial. Y lo interesante es que también podemos ir a la state management aquí, acceder al estado actual para ver todos los estados, podemos cambiarlos desde allí. Podemos hacer eso mientras ocurre la acción, podemos modificarlo en cualquier momento. Entonces aquí, si modifico el valor y lo establezco en 50, puedes ver que cambió de inmediato aquí. No necesitamos hacer nada más. Y en la línea de tiempo, tenemos los eventos que ocurren al mismo tiempo en que se registran. Además, si queremos agrupar múltiples modificaciones, por ejemplo, contar cuántas veces disminuimos el tiempo, cuántas veces disminuimos n. Esto significa que las disminuciones de tiempo se incrementan, por lo que aparecen aquí. Podemos incrementar varias veces, disminuir a cero. Y ahora, si reviso las herramientas de depuración, puedo ver que tengo más mutaciones. Tengo una para cambiar n aquí y otra para cambiar decrease times, que tiene un tipo, por cierto. Déjame ver time. Ahí lo tienes.

10. Using Composable Functions in State

Short description:

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 simple pero poderosa, permitiendo el uso de cualquier API de composición.

Entonces, una cosa que puedo hacer en su lugar es usar el componente de plataforma. Así que lo haremos como estado... Ups. Y luego aquí podemos hacer lo que queramos. Y esto enrutará la modificación. Así que aquí vamos a hacerlo varias veces y disminuir. Ahora vamos a verificar esto y podemos ver que tenemos menos eventos. Podemos inspeccionar y ver los valores antiguos y los nuevos valores. 5 y 0 para n. Ese fue el último.

De acuerdo. El primero se ve como 5 y 4. Ahí lo tienes. Y una cosa que es muy interesante y 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, cualquier cosa que queramos. Entonces, si quiero guardar el estado en el almacenamiento local, solo puedo usar la función useLocalStorage. Y puedo reemplazar useLocalStorage por counter en la 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. Tan simple pero tan poderoso. Puedes usar cualquier API de composición directamente desde aquí y todo lo demás funciona igual. Correcto. Es solo este estado, por lo que aún puedes inspeccionarlo aquí. Aún puedes cambiarlo y se adaptará. Muy bien. Esta es la versión opcional de una tienda.

11. Using the Setup Syntax and Exploring Functionality

Short description:

Entonces 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 más flexibilidad. Puedes usar funciones componibles, como la solicitud de caché, e incluso agregar observadores. Navegar entre páginas muestra la carga inmediata de imágenes y el acceso a nuevas tiendas. Los errores también se pueden ver en la línea de tiempo y se pueden inspeccionar en las herramientas de desarrollo.

Entonces 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 que rebote. Pero hay otra versión de la sintaxis que podemos usar. Y esa es la sintaxis de configuración.

Entonces, la sintaxis de configuración, tengo un ejemplo diferente para eso. Es un poco más largo. No puedo revisar todo. Pero en lugar de tener un objeto, como tenemos aquí, tenemos una función. Esta función es igual que la función de configuración en un componente. Y simplemente creas lo mismo que en un componente, rest, computed, funciones. Usas tus funciones componibles como quieras. Por ejemplo, esto es una solicitud de caché. Es similar a un caché de lo que evaluamos. Caché la primera vez y aún hace la solicitud en segundo plano. Muy, muy simple. Y luego tenemos algunas funciones. E incluso puedes hacer observadores. Así que eso también es genial.

Aquí, por ejemplo, si navego varias veces, obtengo varias imágenes. Y luego, cuando regreso, puedes ver que obtengo la imagen de inmediato. Y en segundo plano, sigue 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. También podemos ver los errores en la línea de tiempo. Y podemos inspeccionarlos de inmediato en las herramientas de desarrollo, lo cual es genial.

12. Logging Errors and Poll Results

Short description:

Podemos registrar errores a través de las herramientas de desarrollo, eliminando la necesidad de registros en la consola. Esto nos brinda acceso a la fuente real del error. 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 fruta múltiple, con múltiples flores y frutas que se fusionan, similar a cómo se crean las tiendas individualmente y se agrupan en una tienda centralizada.

También podemos registrar errores. Por lo tanto, ni siquiera necesitamos tener registros en la consola en ningún lugar, porque podemos hacerlo a pedido a través de las herramientas de desarrollo. Así que puedes centrarte en agregar solo depuradores o puntos de interrupción cuando quieras debug eso. Pero simplemente puedes registrar en la consola desde las herramientas de desarrollo cualquier cosa que desees.

Por lo general, tenemos, solo para mostrarte. Aunque aquí no es muy importante, pero aquí puedes registrar en la consola. Y eso te brinda acceso al error real y su origen.

Eso es todo. Eso es todo lo que quería mostrarte en la demostración. Quiero agradecer a los patrocinadores que tengo en Github. Patrocinadores que me permiten trabajar la mayor parte del tiempo en código abierto. Entonces, si te gusta lo que hago en Voxer, en el sistema UX, en Kinea, o lo que sea, 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 pruebes Kinea pronto. Veamos los resultados de la encuesta.

Dado que había una respuesta técnicamente correcta, ¿es correcto? Sí, sí, hay una respuesta correcta. ¿Y cuál fue la respuesta correcta? Entonces, 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 opciones eran una trampa. El manga era claramente una gran trampa. Ni siquiera conozco ningún manga sobre el cáncer de piña, pero pensé que era divertido. Quería votar por eso solo porque sonaba divertido.

Ok, ¿cuál es el dato curioso? Entonces, está escrito en la documentación, la piña en realidad es una fruta múltiple. Florece como múltiples flores, y luego tienes múltiples frutas que salen de las flores. Y luego se fusionan para convertirse en una gran fruta, que es la piña. Así que esto es bastante similar a las tiendas. Creas tiendas individualmente, y al final se agrupan en una gran tienda centralizada, que es mi pina, básicamente. Muy bien, genial.

QnA

Uso de la Tienda Global y Organización de Archivos

Short description:

El patrón para el uso de la tienda global en Pina implica crear una tienda para cada funcionalidad. Esto permite almacenar información que sobrevive a las páginas o que requiere algún tipo de persistencia. También es útil para colocar la lógica de negocio en una tienda, especialmente para funcionalidades 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 utilizar las tiendas según sea necesario, siempre y cuando se utilicen dentro de las funciones de configuración o se les 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, ¿Pina sugiere dividir las tiendas para diferentes componentes relacionados como Vuex? Aquí estamos asumiendo que los componentes relacionados se refieren a componentes relacionados con una funcionalidad específica. Si estamos equivocados al respecto, Organized Chaos, disculpa. Estoy tratando de encontrar una pregunta escrita para poder leerla. De acuerdo, ahí vamos. Espera, no puedo encontrarla. Entonces, en realidad no hay... Divides, creas una tienda para una funcionalidad. Como dije en la charla, generalmente colocas la información de la tienda que sobrevive a las páginas o que requiere algún tipo de... Siempre utiliza una aplicación OAuth2 para que no necesariamente tenga que sobrevivir a una página. A veces también es más fácil colocar la lógica de negocio en una tienda para una funcionalidad específica. Pero especialmente con la API de composición, eso no es realmente necesario. Así que a veces, para alguna lógica de negocio específica, podría ser útil especialmente si se utiliza en toda la aplicación como la autenticación o en algunos sitios web de comercio electrónico donde el carrito puede volverse muy complicado. Entonces, idealmente con Binia, creas un archivo por tienda para no crear múltiples tiendas en un solo archivo. Eso es todo. No hay nada más. Luego eres libre de hacer lo que quieras, importarlas, lo que sea, siempre y cuando se utilicen dentro de las funciones de configuración o se pase la instancia de Binia como se muestra en la documentación.

Comparación de rendimiento: Pinia vs V-rex

Short description:

Cuando se actualiza 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 watchers, pero se necesita más información para determinar la causa.

Bien, la siguiente pregunta viene de V-rex. Cuando se actualiza el estado de decenas a cientos de componentes en tiempo real como reacción a una entrada del usuario o para animación, notamos que V-rex es extremadamente lento. ¿Cómo es el rendimiento de Pinia en comparación con V-rex? Así que creo que la persona está hablando de V-rex 4 o V-rex 3, probablemente. No creo que V-rex tenga nada que ver con la lentitud 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 también será más rápido que V-rex 4. Pero no creo que las animaciones sean lentas. Sí, probablemente no se trata de datos. Es más sobre las propiedades animadas y tal vez algunos watchers que se están viendo. Es simplemente imposible saberlo sin eso, en realidad.

Cambio directo de estado en Vuex

Short description:

Puedes cambiar el estado directamente en Vuex sin usar mutaciones, pero este enfoque tiene limitaciones. Al evitar las mutaciones, no obtendrás la experiencia de DevTools y no podrás ver las mutaciones ni nada en las DevTools. Esto va en contra de la forma recomendada de usar Vuex y puede romper cosas, como que los plugins no funcionen correctamente.

De acuerdo, siguiente pregunta. Viene de Ricky Yu. Ya puedo cambiar el estado directamente en Vuex. Simplemente evito las mutaciones. ¿Qué hay de malo en 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 ni nada en las DevTools. Así que eso tiene un gran impacto en Vuex. Eso es todo. Bueno, realmente podríamos hacer 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, basado en mutaciones. Así que no recuerdo si hay otras cosas que podrían romperse. Probablemente los plugins no funcionarán, como otros plugins que no react así que simplemente va en contra de la forma de hacer las cosas. Así que las cosas se romperán. Tiene sentido.

Comparación de PNIA y Vuex5

Short description:

Resumir las tres principales razones para migrar de PNIA a Vuex5: API de plugins, experiencia avanzada de DevTools y soporte de TypeScript. PNIA solo ocupa 1.5 kilobytes debido a su simplicidad y enfoque en la experiencia de desarrollo. Gracias por unirse a nosotros, Eduardo.

De acuerdo, también de Ricky Yu, resumir las tres principales razones para migrar de PNIA a Vuex5. Así que danos tu discurso de ascensor. No creo que Vuex5 esté ahí todavía, así que no hay nada con qué comparar. Hay una rama experimental. Así que imagina que existe 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 a PNIA de Vuex5 hoy en día son el API de plugins que es existente y más advanced. La experiencia de DevTools que también es más advanced. No estoy seguro de qué experiencia de DevTools existe para Vuex5. El módulo de testing, así que hay un módulo oficial de testing para PNIA, también hice la versión de Vuex. Y también hay un plugin para Nuxt. Y tiene un lindo logo, tiene un logo. Sabes, eso es un gran punto de venta, diría yo. Ahora la verdadera razón son los plugins y la experiencia de DevTools. Y si quieres una tercera, sería el soporte de TypeScript. Espera, ¿tienes realmente el mismo soporte de TypeScript? ¿Cuál era la otra cosa? El testing, diría yo.

De acuerdo, la siguiente pregunta viene del Sr. Backend. ¿Cómo es que PNIA solo ocupa un kilobyte? Porque es muy simple. En realidad, la parte más grande es la de DevTools. Ahora mismo es 1.5. Creo. Oh, sí. Aclaremos. Son 1.5. Sí, técnicamente ya no es uno, ¿verdad? Solía ser uno. Pero a medida que fui agregando características como los plugins, y tanto la sintaxis de configuración como la de opciones, ahora es 1.5. Aún así, sigue siendo muy, muy pequeño de todos modos. Uh, no hace... No hace tanto. ¿Qué puedo decir? Porque todo es... También hay un gran enfoque en la experiencia de desarrollo. Así que todo lo que es la experiencia de desarrollo se elimina en producción. Genial, muy bien.

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

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.