web-dev-qa-db-fra.com

Mise à jour d'un objet dans un tableau avec Vuex

Comment puis-je mettre à jour un objet à l'intérieur d'un tableau avec Vuex? J'ai essayé, mais cela n'a pas fonctionné:

const state = {
  categories: []
};

// mutations:
[mutationType.UPDATE_CATEGORY] (state, id, category) {
  const record = state.categories.find(element => element.id === id);
  state.categories[record] = category;
}

// actions:
updateCategory({commit}, id, category) {
  categoriesApi.updateCategory(id, category).then((response) => {
    commit(mutationType.UPDATE_CATEGORY, id, response);
    router.Push({name: 'categories'});
  })
}
javascriptvue.jsvuejs2vuex
6
Phuong Thuan
[mutationType.UPDATE_CATEGORY] (state, id, category) {
  state.categories = [
     ...state.categories.filter(element => element.id !== id),
     category
  ]
}

Cela fonctionne en remplaçant le tableau "categories" par le tableau d'origine sans l'élément correspondant, puis en concaténant l'élément mis à jour à la fin du tableau.

Une mise en garde à cette méthode est qu'elle détruit l'ordre du tableau, bien que dans de nombreux cas cela ne soit pas un problème. Juste quelque chose à garder à l'esprit.

18
ArtemSky