Recuperando Parâmetros de Objeto da Query

Introdução

Neste projeto, você aprenderá como corrigir um bug na biblioteca vue-router que causa problemas ao enviar um objeto para o parâmetro de consulta (query parameter). Este projeto irá guiá-lo através das etapas necessárias para localizar o arquivo problemático, identificar o problema e implementar uma solução para resolver o bug.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o ambiente de desenvolvimento e instalar as dependências necessárias
• Como localizar o arquivo contendo o bug e se preparar para corrigi-lo
• Como corrigir o bug na função resolveQuery
• Como reconstruir e testar a correção para garantir que ela resolva o problema

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Identificar e corrigir bugs em uma biblioteca de terceiros
• Lidar com valores de objeto em parâmetros de consulta
• Verificar correções para garantir que funcionem como esperado
• Contribuir para projetos de código aberto e aprimorar suas habilidades de resolução de problemas e depuração

Corrigir o Bug

Para começar, observe a estrutura de diretórios dos arquivos à esquerda, conforme segue:

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

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente; você verá a página.

Abra o console do navegador e observe a saída. Primeiro, clique no botão "test", depois clique no botão "pushQuery". A página de visualização no navegador deve ter a seguinte aparência:

Há um bug no código vue-router v3.4.1 que, ao usar this.$router.push, quando o value correspondente à key em query é um objeto, ele será lido como uma string "[object object]", o que nos impede de recuperar o valor do objeto corretamente. Por favor, corrija este problema.

Nesta etapa, você corrigirá o bug na função resolveQuery.

1. Localize o arquivo vue-router-3.4.1/src/util/query.js e vá para a linha 41 para resolver o problema com base na reprodução do problema.

2. A função castQueryParamValue deve lidar com o caso em que o valor é um objeto. Modifique a função da seguinte forma:

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

Reconstruir e Testar a Correção

Nesta etapa, você reconstruirá o pacote vue-router-3.4.1 e testará a correção.

1. No terminal, navegue até o diretório vue-router-3.4.1.
2. Execute o comando npm install para instalar as dependências. Este processo pode levar um tempo, por favor, seja paciente. (Se ficar preso por muito tempo, pressione Ctrl+C para terminar o processo e, em seguida, execute este comando novamente.)
3. Após todas as dependências terem sido instaladas com sucesso, execute o comando npm run build para reconstruir e lançar o projeto.
4. Reinicie a página e clique em "Web 8080" para visualizar a página.
5. Abra o console do navegador novamente e observe a saída. Primeiro, clique no botão "Test", depois clique no botão "pushQuery" para ver e testar o efeito da correção.

A correção agora deve lidar corretamente com o caso em que o value correspondente à key em query é um objeto, e você deve ver o objeto sendo exibido corretamente no console.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.