Vue JSON シリアル化の問題と解決策の分析

フロントエンド開発では、バックエンドとの間でデータを転送したり、バックエンドからデータを取得したりする必要があることがよくありますが、このとき、データのシリアル化と逆シリアル化を使用する必要があり、JSON (JavaScript Object Notation) は非常に便利です。一般的なデータ伝送形式。 Vue フレームワークでは、通常、axios や fetch などのツールを使用して、AJAX を通じてバックエンドからデータを取得し、そのデータを Vue コンポーネントにバインドしますが、特に Date などの JSON 内のデータの場合に、JSON シリアル化の問題が発生することがあります。型はシリアル化できません。この記事では、JSON シリアル化の問題とその解決策について説明します。

まず、一般的な JSON シリアル化の問題を理解する必要があります。 JavaScript では、JSON.stringify メソッドを使用して JavaScript オブジェクトを JSON 文字列にシリアル化できます。例:

let obj = {
  name: 'John',
  age: 30,
  birthday: new Date(1990, 1, 1)
};

let json = JSON.stringify(obj);
console.log(json); // {"name":"John","age":30,"birthday":"1990-02-01T00:00:00.000Z"}

上記のコードは、日付型のプロパティを含む JavaScript オブジェクトを JSON 文字列にシリアル化しますが、次のことが判明しました。 Date 型は文字列にシリアル化されました。この JSON 文字列を JavaScript オブジェクトに直接解析すると、Date 型の文字列が Date オブジェクトに変換されますが、この JSON 文字列をバックエンドに渡すと、バックエンドが JSON 文字列を解析するときに、Date 型の文字列は変換されません。正しく解析されました。

そこで問題は、Date 型またはシリアル化できないその他の型を含む JavaScript オブジェクトをどのようにシリアル化するかということです。現時点では、JSON.stringify メソッドの 2 番目のパラメーター (replacer パラメーター) を使用して、シリアル化プロセスをカスタマイズできます。

replacer パラメータには関数を使用できます。この関数は、属性名と属性値の 2 つのパラメータを受け取り、元の属性値を置き換える新しい属性値を返します。例:

let obj = {
  name: 'John',
  age: 30,
  birthday: new Date(1990, 1, 1)
};

let json = JSON.stringify(obj, function(key, value) {
  if (key === 'birthday') {
    return value.toISOString();
  } else {
    return value;
  }
});

console.log(json); // {"name":"John","age":30,"birthday":"1990-02-01T00:00:00.000Z"}

上のコードでは、置換関数を定義します。現在の属性名が誕生日の場合、Date の toISOString メソッドを使用して ISO 形式の文字列に変換し、バックエンドで解析できるようにします。それ以外の場合は、元の属性値を返します。このようにして、Date 型を含む JavaScript オブジェクトを正しくシリアル化できます。

replacer パラメーターに加えて、JSON.stringify メソッドにはスペース パラメーターもあり、出力 JSON 文字列コンテンツの形式を定義するために使用できます。たとえば、次のようになります。上記のコードではスペースを使用しています。パラメーターを 2 に設定すると、出力される JSON 文字列がインデントされ、より美しくなります。

要約すると、axios または他のツールを使用して Vue でデータを取得するとき、データに直接シリアル化できない日付型やその他のデータが含まれている場合、JSON.stringify メソッドの replacer パラメーターを使用して、データをバックエンドに正しく渡すためのシリアル化ルール。

以上がVue JSON シリアル化の問題と解決策の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。