Mappage des réponses JSON aux classes du modèle dans Vue.js

Question

Existe-t-il une bibliothèque de meilleures pratiques ou de facto pour Vue.js lorsqu'il s'agit de mapper les réponses de l'API JSON aux objets de modèle javascript "réels"? Venant de développement iOS, il existe d'excellentes bibliothèques comme JSONModel et MagicalRecord traitant exactement cette question.

La plupart des tutoriels/exemples de Vue.js que j'ai pu trouver semblent fonctionner avec les réponses JSON. À mon humble avis, cela devient lourd et rapide. Par exemple, lorsque vous traitez avec des données brutes comme des chaînes de date qui seraient préférables à des objets Date réels. Cela implique donc une sorte de fonctionnalité de (dé) sérialisation. En outre, il serait bon d'avoir des choses comme Foo.findAll(), Foo.findById(1) ou foo.save() pour créer des appels appropriés au service backend.

J'ai trouvé vue-model qui semble prometteur, mais il ne semble pas avoir beaucoup de traction. Cela me fait réfléchir, si la cartographie de JSON à des objets n'est pas quelque chose que beaucoup de gens font dans leurs SPAs? Quelles sont les approches alternatives?

Answer 1

Ce n'est pas vraiment une pratique courante. La beauté de travailler avec JSON dans un SPA basé sur un navigateur est que JSON analysé est javascript. Vous n'avez pas à mapper les valeurs dans une classe typée. Cela dit, je comprends votre point de vue, et à certains moments, j'ai construit une classe javascript dont le constructeur accepte un objet javascript comme un "initialiseur". Ensuite, dans une réponse API, vous pouvez simplement mapper la réponse pour convertir les objets bruts en instances "classe" avec des méthodes, des propriétés Date, etc.

Disons que j'ai une classe Animal javascript.

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

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

Dans une réponse API, il est extrêmement simple de créer des instances Animal à partir de la réponse. Maintenant, la propriété data de votre animal dans Vue contient maintenant une collection d'objets Animal.