Comprender las partes difíciles de Nuxt

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.

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.

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!