Vue Router 2.7.0 のバグ修正 | プログラミングチュートリアル

はじめに

このプロジェクトでは、vue-router-2.7.0 ライブラリにおける query パラメータの null 値の処理に関連するバグを修正する方法を学びます。

👀 プレビュー

修正済みの vue-router の query 処理

🎯 タスク

このプロジェクトでは、以下のことを学びます。

vue-router-2.7.0/src/util/route.js ファイル内の isObjectEqual 関数をどのように見つけ、理解するか。
isObjectEqual 関数を修正して、null 値を正しく処理する方法。
修正済みの関数を持つ vue-router-2.7.0 プロジェクトを再構築してリリースする方法。
以前のエラーメッセージが表示されないことをブラウザコンソールで確認することで、修正をテストする方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

サードパーティのライブラリにあるバグを特定して修正すること。
vue-router-2.7.0 ライブラリを使用し、その内部関数を理解すること。
コード変更を行った後にプロジェクトを再構築してリリースすること。
ブラウザコンソールのエラーメッセージを確認することで、修正をテストすること。

isObjectEqual 関数を修正する

始めに、左側のファイルのディレクトリ構造を以下のように見てみましょう。

├── vue-router-2.7.0
├── vue.min.js
└── index.html

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部の「Web 8080」を開き、手動で更新し、「test」をクリックしてブラウザコンソールの「Console」オプションを開くと、2 つのエラーメッセージが表示されます。それらは「TypeError: Cannot convert undefined or null to object」と「Uncaught TypeError: Cannot convert undefined or null to object」です。

修正前

このステップでは、vue-router-2.7.0/src/util/route.js ファイル内の isObjectEqual 関数を修正して、null 値を正しく処理する方法を学びます。

vue-router-2.7.0/src/util/route.js ファイルを開きます。
isObjectEqual 関数を見つけます。

function isObjectEqual(a = {}, b = {}): boolean {
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length!== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // ネストした等価性をチェック
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

関数を更新して、null 値を正しく処理するようにします。

function isObjectEqual(a = {}, b = {}): boolean {
  if (!a ||!b) return a === b;
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length!== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // ネストした等価性をチェック
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

変更点は以下の通りです。

a または b が null または undefined であるかどうかをチェックする条件を追加しました。どちらかが null または undefined の場合、関数は a === b を返します。
これにより、関数は query パラメータ内の null 値を正しく処理するようになります。

プロジェクトを再構築してテストする

このステップでは、isObjectEqual 関数を修正した後、vue-router-2.7.0 プロジェクトを再構築してテストします。

ターミナルで vue-router-2.7.0 ディレクトリに移動します。
依存関係をインストールするために npm install コマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間止まった場合は、Ctrl+C を押してプロセスを終了し、その後再度このコマンドを実行してください。）
インストールが完了したら、npm run build コマンドを実行して、プロジェクトを再構築してリリースします。これにより、修正された isObjectEqual 関数を持つ更新された vue-router-2.7.0 ライブラリが生成されます。
ブラウザのページに戻り、ページを更新します。
「test」をクリックして、Console タブのコンソールを開いて確認すると、上記のエラーメッセージは表示されなくなります。

エラーメッセージが表示されなくなった場合、修正は成功です。これでプロジェクトが完了です！

修正後

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。

null 値を正しく処理する