Vue.jsのモデルクラスへのJSON応答のマッピング

Question

JSON APIレスポンスを「実際の」Javascript Modelオブジェクトにマッピングする場合、Vue.jsのベストプラクティスまたはデファクトライブラリがありますか？ iOS開発から来て、JSONModelとMagicalRecordのような優れた図書館があります。

ほとんどのVue.jsチュートリアル/例わかりやすいJSONレスポンスで動作するようです。 IMHO、これはすぐに面倒なことになります。たとえば、日付文字列のような生データを扱うときには、実際のDateオブジェクトよりも優れています。つまり、ある種の（デ）シリアライズ機能が必要です。また、Foo.findAll()、Foo.findById(1)、またはfoo.save()のようなものをバックエンドサービスへの適切な呼び出しを作成するのがいいでしょう。

私はvue-modelが有望に見えましたが、多くの牽引力を持たないようです。これは、JSONをオブジェクトにマッピングするだけで、多くの人がSPAで行うことではないかと思います。 代替アプローチは何ですか？

Answer 1

これは実際には一般的ではありません。ブラウザベースのSPAでJSONを使用することの美しさは、JSON は、 javascriptであるということです。値を型付きクラスにマップする必要はありません。

私はあなたのことを理解していますし、特定の時にコンストラクタがjavascriptオブジェクトを「初期化子」として受け入れるjavascriptクラスを構築していることがあります。 APIレスポンスでは、メソッドを使用して生のオブジェクトを「クラス」インスタンスに変換するためのレスポンスをマップすることができます。

私はAnimalのjavascriptクラスを持っています。

class Animal { 
    constructor(initializer){ 
    this.name = initializer.name 
    this.born = new Date(initializer.born) 
    } 

    sayMyName(){ 
    console.log(this.name) 
    } 
} 

APIレスポンスでは、応答からAnimalインスタンスを作成するのは非常に簡単です。

getAnimals() 
    .then(response => this.animals = response.data.map(a => new Animal(a))) 

Vueの動物データプロパティには、Animalオブジェクトのコレクションがあります。