3
votes

Vuex - Mettre à jour l'objet entier à l'intérieur du tableau

Dans ma mutation Vuex, je souhaite remplacer un élément de tableau dans mon état, comme indiqué ci-dessous:

UPDATE_MAILING(state, mailing) {
    let index = _.findIndex(state.mailings, {id: mailing.id});

    state.mailings[index] = mailing
}

Mais cela ne met pas à jour mon modèle lié à ce tableau. Comment puis-je mettre à jour de manière réactive l'élément du tableau?

javascript vue.js vuejs2 vuex

4 commentaires

Au lieu de le faire à l'intérieur de la mutation, vous pouvez faire la même chose à l'intérieur des getters!

Pour autant que je sache, si des changements surviennent dans votre tableau (état interne), il devrait être automatiquement mis à jour dans votre modèle html. Pour y parvenir quel que soit le tableau que vous souhaitez modifier, récupérez ce tableau à partir de l'état dans la fonction calculée. (Dans le calcul chaque fois que sa dépendance (ici votre tableau) change, il mettra automatiquement à jour le template html)

Ce lien pourrait vous aider. vuejs.org/v2/guide/computed.html#Basic-Example

pourriez-vous s'il vous plaît me dire si mon commentaire a aidé? Ai-je bien compris la question?

3 Réponses :

10
votes

Vous devez utiliser Vue. $ set (ou this. $ set dans l'instance de Vue):

UPDATE_MAILING(state, mailing) {
    let index = state.mailings.findIndex(item => item.id === mailing.id)
    Vue.$set(state.mailings, index, mailing)
}

Docs: Vue.js → Réactivité en profondeur

0 commentaires

3
votes

Comme décrit dans la documentation , vous pouvez utiliser soit Array.prototype.splice () ou Vue.set () pour remplacer de manière réactive l'élément du tableau:

mutations: {
  UPDATE_MAILING(state, mailing) {
    const index = state.mailings.findIndex(x => x.id === mailing.id)
    state.mailings.splice(index, 1, mailing)

    // OR:
    Vue.set(state.mailings, index, mailing)
  }
}

  Je préfère  splice  ici, car il ne nécessite pas d'importer  Vue , qui facilite également le test. 
   démo

2 commentaires

quelle est la différence entre utiliser ceci et Vue. $ set ?

Il s'agit simplement d'une méthode alternative, comme décrit dans la documentation . Je préfère splice ici, car il ne nécessite pas l'importation de Vue , ce qui facilite également le test.

0
votes

je veux vous dire que si vous voulez un opérateur de type Array, vous feriez mieux d'utiliser mthod comme splice slice pop push shift unshift, seulement vous utilisez thesel, le modèle peut être lié à votre tableau. N'utilisez pas le tableau [index] pour l'opérateur; j'espère vous aider sincèrement

0 commentaires