Video Summary and Transcription
Esta charla relámpago aborda problemas comunes de Vue, como la mutación del estado de Vuex Store fuera de los controladores de mutación y la clonación incorrecta de matrices y objetos. Los consejos de solución de problemas incluyen verificar el código localmente, solucionar problemas con window o navigator no definidos y verificar problemas en el backend y datos adecuados en la pestaña de red. Consejos adicionales incluyen utilizar la pestaña de red y el registro de la consola para detectar errores, verificar el estado en tiempo real con las herramientas de desarrollo de Vue y buscar apoyo en Discord, GitHub o Stack Overflow.
1. Introducción a Nuxt y Problemas Comunes en Vue
En esta charla relámpago, hablaré sobre Nuxt y problemas comunes en Vue. Un problema común es mutar el estado del almacén Vuex fuera de los manejadores de mutación. Para evitar esto, habilita el Modo Estricto de Vuex. Otro problema es la clonación incorrecta de matrices y objetos. La desestructuración resulta en una copia superficial, así que utiliza los métodos JSON o importa lodash-es para una clonación profunda adecuada.
Hola a todos, bienvenidos a mi charla relámpago. En esta hablaré sobre Nuxt y algunos de los problemas que pueden surgir. Soy Constantine, desarrollador front-end en Passionate People. Soy Embajador de Nuxt.js y ayudo diariamente en Stack Overflow.
Esta charla será principalmente una continuación de la que hice en Nuxt.nation. Pueden encontrar ambos días en su página web y probablemente estará disponible pronto también en YouTube. Dado que esta es una charla más corta, nos centraremos principalmente en problemas comunes de Vue.
Comencemos con el más común, no mutar el estado del almacén Vuex fuera de los manejadores de mutación. Esto proviene del Modo Estricto de Vuex, que es una buena práctica habilitar y es lo que hace Nuxt. Si no te gusta, simplemente puedes establecerlo como falso en tu archivo StoreIndex.js.
Por ejemplo, esto es genial porque te ayuda a evitar algunos problemas comunes cuando intentas actualizar valores en una matriz u objeto. Si tienes una matriz y quieres clonarla, la forma incorrecta de hacerlo es mediante la desestructuración, ya que esto realiza una copia superficial. He vinculado una respuesta con más detalles sobre esto que puedes encontrar. Por cierto, esta charla está disponible en el subdominio vr21. Esto significa QLondon 2021. Ya está en vivo, así que pueden encontrar esta charla allí.
Entonces, volviendo a nuestro problema. Si quieres hacerlo correctamente, necesitas hacer una copia profunda en formato JSON. De lo contrario, también puedes importar lodash para evitar algunos problemas raros, pero aún así pueden ocurrir si quieres cargarlo de manera adecuada y básicamente no cargar toda la biblioteca. Solo utiliza lodash-es, cárgalo de esta manera. Luego podrás clonar profundamente correctamente y tener tu objeto que puedes editar completamente sin tener este problema.
2. Solución de Problemas de Código
Discutamos qué puede estar bloqueando tu código en producción. Verifica que tu código funcione localmente y aísla el problema. Recuerda que Nuxt es una aplicación visual en el servidor. Soluciona problemas con window o navigator indefinidos. Verifica nuevamente problemas en el backend y los datos adecuados en la pestaña de red.
Ahora hablemos sobre qué puede estar bloqueando si tu código no funciona en producción. Para esto, primero podemos verificar que tu código funcione localmente. Ya sea ejecutando yarn.build y yarn.start si estás en el servidor. Me refiero usando el servidor git, o yarn.generate y yarn.start si estás apuntando a la compilación estática.
Verificar tus variables de entorno y que estén definidas correctamente puede ser útil. También verificar que estén definidas en tu plataforma. Este es un problema común que algunas personas olvidan configurar. Así que esto depende de la plataforma, pero es bastante fácil de encontrar cuando compilas tu aplicación. También intenta aislar tu problema para reducir la cantidad de cosas que pueden salir mal. Con tener muchas pilas, una encima de la otra. Y también intenta alojar tu aplicación en otro lugar para ver si no proviene de la plataforma, o tal vez para depurar más rápidamente.
Otro problema común es cuando window document o navigator es indefinido. Entonces, para esto, debes recordar que Nuxt es básicamente una aplicación visual en el servidor. Si estás usando srtrue en tu archivo Nuxt.config.js. Eso significa que tu código se ejecutará tanto en el navegador como en el servidor. Por ejemplo, window no está definido en el servidor. Entonces, para esas situaciones, puedes solucionarlo con algo como esto. Por ejemplo, aquí tenemos un calendario. Así que este es un calendario de reservas, que no tiene nada que ver con el servidor porque esto es solo una cosa visual en la que alguien vendrá y hará clic. También puedes verificar si se está ejecutando en el navegador. Por ejemplo, aquí para el tamaño de la ventana, no importa verificarlo en el servidor. Y también puedes hacer una importación dinámica, de esta manera importarás el módulo solo cuando sea necesario. Y también tienes cosas geniales como interpolación allí. Así que esto es realmente útil. Pruébalo. Es realmente genial. Y por último, qué hacer si tus cosas simplemente no funcionan cuando haces clic en un botón. Primero, verifica nuevamente que no sea un problema del backend porque esto sucede a veces. También verifica que estés recibiendo los data adecuados en tu pestaña de red. Esto es lo mejor para intentar encontrar cualquier error.
3. Consejos de Solución de Problemas y Soporte
Utiliza la pestaña de red y el registro de la consola para detectar errores. El depurador es útil para aplicaciones complejas. Verifica el estado en tiempo real con las herramientas de desarrollo de Vue. Ten en cuenta las advertencias de Vue 2. Prueba diferentes navegadores para obtener mensajes de error útiles. Limpia npm y reinstala el proyecto. Tómate un descanso y pide ayuda a un compañero. Busca ayuda en Discord, GitHub o Stack Overflow.
Porque la pestaña de red no miente, y es tu mejor amiga para detectar posibles errores. También registra en la consola todo el día. También puedes utilizar el depurador si tienes una aplicación compleja con muchas cosas sucediendo allí. Puedes verificar tu estado en tiempo real gracias a las herramientas de desarrollo de Vue. Tal vez abre una ventana privada porque algunas extensiones pueden causar problemas. Por ejemplo uBlock o privacy badger y en una ventana privada, estas están desactivadas de forma predeterminada.
Si aún estás utilizando Vue 2, ten en cuenta algunas advertencias relacionadas con venue.js al editar un array o un objeto. Si aún te resulta difícil encontrar qué está sucediendo, tal vez prueba Firefox o Chrome, dependiendo de cuál estés utilizando, porque algunos errores pueden ser útiles. Quiero decir, estarán redactados de manera diferente, así que sí. Limpia tu npm, tus propios modules de nodo y reinstala tu proyecto. Si aún tienes problemas, simplemente date una ducha, camina o relájate con Moody y luego vuelve a intentarlo. Pide ayuda a un compañero porque esto puede ser útil para que alguien intente reproducir tu problema. Y si no funciona, contáctanos en Discord, las discusiones de GitHub o Stack Overflow. Estaremos encantados de ayudarte allí. Esto es todo para mi charla relámpago. Gracias por escuchar y que tengas un buen día. ¡Nos vemos!
Comments