Recuperación de parámetros de objeto desde la consulta

Introducción

En este proyecto, aprenderás a corregir un error en la librería vue-router que causa problemas al enviar un objeto como parámetro de consulta. Este proyecto te guiará a través de los pasos necesarios para localizar el archivo problemático, identificar el problema e implementar una solución para resolver el error.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el entorno de desarrollo e instalar las dependencias necesarias
• Cómo localizar el archivo que contiene el error y prepararse para corregirlo
• Cómo corregir el error en la función resolveQuery
• Cómo reconstruir y probar la corrección para asegurarse de que resuelva el problema

🏆 Logros

Después de completar este proyecto, podrás:

• Identificar y corregir errores en una librería de terceros
• Manejar valores de objeto en parámetros de consulta
• Verificar las correcciones para asegurarse de que funcionen como se espera
• Contribuir a proyectos de código abierto y mejorar tus habilidades de resolución de problemas y depuración

Corrige el error

Para comenzar, observa la estructura de directorio de los archivos en el lado izquierdo, como sigue:

├── vue-router-3.4.1
├── vue.js
└── index.html

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Abre la consola del navegador y observa la impresión. Primero, haz clic en el botón "test", luego haz clic en el botón "pushQuery". La página de vista previa en el navegador debería verse como sigue:

Hay un error en el código de vue-router v3.4.1 que cuando se utiliza this.$router.push, cuando el valor correspondiente a la clave en query es un objeto, se leerá como una cadena "(object object)", lo que impide recuperar correctamente el valor del objeto. Por favor, corrige este problema.

En este paso, corregirás el error en la función resolveQuery.

1. Localiza el archivo vue-router-3.4.1/src/util/query.js y ve a la línea 41 para resolver el problema basado en la reproducción del problema.

2. La función castQueryParamValue debe manejar el caso en el que el valor es un objeto. Modifica la función como sigue:

   const castQueryParamValue = (value) =>
     typeof value == "number" ? "" + value : value;
   

Reconstruir y probar la corrección

En este paso, reconstruirás el paquete vue-router-3.4.1 y probarás la corrección.

1. En la terminal, navega hasta el directorio vue-router-3.4.1.
2. Ejecuta el comando npm install para instalar las dependencias. Este proceso puede tardar un tiempo, por favor, ten paciencia. (Si se atasca durante mucho tiempo, presiona Ctrl+C para terminar el proceso y luego ejecuta este comando nuevamente.)
3. Una vez que se hayan instalado correctamente todas las dependencias, ejecuta el comando npm run build para reconstruir y liberar el proyecto.
4. Reinicia la página y haz clic en "Web 8080" para ver la página.
5. Abre nuevamente la consola del navegador y observa la impresión. Primero, haz clic en el botón "Test", luego haz clic en el botón "pushQuery" para ver y probar el efecto de la corrección.

La corrección ahora debería manejar correctamente el caso en el que el valor correspondiente a la clave en query es un objeto, y deberías ver el objeto mostrado correctamente en la consola.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.