Comment travailler avec des versions locales d'objets de données dans une application Vue.js ?

Question

J'utilise Vue.js et vuex pour travailler avec des données provenant d'un magasin dorsal auquel j'accède via une API. Ma question porte peut-être davantage sur la sémantique et sur la manière de poser cette question et de rechercher de meilleures réponses, car je ne connais même pas les termes corrects sur lesquels effectuer une recherche. Alors voilà...

Dans mon code Vue, je fais un appel à mon api back-end et il retourne un blob json avec un bloc de données avec lequel je veux travailler dans l'interface utilisateur. Aucun problème. Mais ensuite, je dois modifier légèrement ces données pour les présenter à l'utilisateur. Cela implique d'évaluer quelques champs et de les modifier (par exemple, si la valeur est 0, mettre 'n/a', etc.), peut-être faire quelques calculs sur quelques champs, etc. Ensuite, je présente le tout à l'utilisateur dans une grille ou un tableau. Je veux que l'utilisateur puisse également trier et rechercher dans les champs. Ainsi, je peux afficher un champ nommé fullName qui provient du back-end, mais permettre à l'utilisateur de trier sur un champ nommé lastName qui ne figure pas dans la grille.

Ceci étant dit, voici ma question : dois-je créer un seul " transformateur/réducteur " dans le code pour traduire l'objet de données provenant de l'API en ce dont j'ai besoin pour l'interface utilisateur ? Ou dois-je écrire plusieurs filtres (j'entends par là des filtres Vue.js qui vont directement dans le html avec le tuyau '|') pour modifier les champs directement dans le modèle html ? Ce qui m'inquiète, c'est qu'une fois que j'ai modifié l'objet qui revient de l'API, que se passe-t-il si je dois poster/mettre à jour/retourner une sorte de mise à jour - alors j'ai besoin d'un transformateur 'inverse' pour revenir à un objet que mon API veut voir.

D'une manière générale, je suppose que ma question pourrait se résumer à "comment puis-je gérer localement un objet de réponse à l'api de manière à maintenir sa "pureté" ?". Ou quelque chose de ce genre. Je suis évidemment en train de tâtonner pour trouver les termes corrects et c'est pourquoi j'ai du mal à trouver des informations sur ce sujet sur Google. Pour cela, je m'excuse et toute aide serait appréciée.

Par ailleurs, je suis conscient que ma question n'a rien de spécifique à Vue, car ce problème pourrait s'appliquer à n'importe quel cadre d'interface utilisateur piloté par des données.

Answer 1

Je pense que je comprends ce que vous demandez maintenant. Vous voulez juste savoir si vous devez modifier la réponse avant de la rendre consommable par l'IU. Disons que vous utilisez axios. Ce que je ferais dans Vue est d'utiliser la fonction response.data comme données à injecter dans la vue data propriété. Par exemple, votre response.data renvoie un tableau d'objets. Vous pouvez coder en dur une variable de données dans Vue comme ceci :

data () {
    return {
      apiData: []
   }
}

et avec la réponse de l'API, définissez le tableau de données comme ceci :

const response = await axios.get(...);
this.apiData = response.data.filter(item => return item.foo === bar);

Maintenant apiData contient une version filtrée des données de la réponse, qui ont été récupérées de manière asynchrone pour être traitées, y compris les ObjectId de chaque objet. Note : J'appellerais ceci pendant created(){} Vous pouvez référencer les objets du tableau par leur ObjectID dans l'interface utilisateur, comme ceci :

<div v-for="item in apiData" :key='item_id' :item="item"> 
   <p> {{item.whateverProperty}} </p>
</div>