Disons que j'ai un composant VUE qui possède les données suivantes, qui ont été récupérées à partir d'une API:
data: () => ({
books: [
{name: 'The Voyage of the Beagle', author: 'Charles Darwin'},
{name: 'Metamorphoses', author: 'Ovid'},
{name: 'The Interpretation of Dreams', author: 'Sigmund Freud'},
],
}),
4 Réponses :
Je maintiens personnellement un autre tableau contenant un État relationnel à chaque livre plutôt que d'essayer de muter les données de réponse de l'API. C'est juste moi cependant.
Bienvenue sur le site. Étant donné que votre réponse fait référence à une autre réponse, cela aurait probablement dû être un commentaire.
Vous pouvez ajouter les données de présentation après avoir reçu les informations de l'API:
...
data: () => ({ books: [] });
...
methods: {
// API call to get the books
async requestBooks() {
// TODO: add try catch block
const books = await getBooks(); // Your API call
this.books = addPresentationInformation(books);
},
addPresentationInformation(books) {
return books.map(book => {
return {
...book, // default format from API (name, author)
open: false, // add the open variable to the object
reading: false,
currentPage: 0
}
});
}
},
created() {
this.requestBooks(); // Call the api on created hook to initialize the books data prop
}
Probablement un autre moyen est de copier l'objet et de le modifier et de conserver les données de réponse d'origine
J'utilise maintenant normalizr pour traiter et aplatir les réponses de l'API backend, et cette bibliothèque fournit une signifie ajouter des données supplémentaires. Par exemple, le schéma suivant (code> ajoute l'attribut de données code> masqué. const taskSchema = new schema.Entity(
'tasks',
{},
{
// add presentation data
processStrategy: (value) => ({
...value,
hidden: false
}),
}
);
Lorsque vous dites
Store , vous voulez dire dans le localStorage du navigateur, de sorte que la prochaine fois que l'utilisateur ouvre l'application, l'application sait quel livre était ouvert?@Davidalvarez non, il n'est pas nécessaire d'être persistant entre les recharges de la page. Juste des variables générales responsables de l'aspect visuel des objets.
Alors je ferais exactement comme @andres foronda suggère dans sa réponse