Vuejs Mutating Object passé en tant que prop

Question

Si je passe (une référence à) un Objet en tant que prop, est-il OK de muter les valeurs dans la prop?

Je développe une application web qui nécessitera beaucoup de valeurs à passer à un composant, et j'essaie de trouver le meilleur moyen de passer les valeurs au composant et les renvoyer au parent.

D'après tout ce que j'ai lu, muter une prop est la mauvaise façon de faire les choses, car la prochaine fois que le composant est mis à jour, les valeurs sont renvoyées au composant enfant, écrasant les mutations. Mais seule la référence à l'objet est passée, donc toute mutation des valeurs dans la prop objet se produit sur l'objet d'origine dans le composant parent. En outre, Vuejs ne se plaint pas de la mutation des props lorsque cela se produit.

const subComponent = {
    name: "subComponent",
  template: `

        Entrée du sous-composant

    `,
  props: {
    objectProp: {
      required: false,
      default: () => {return {val1: "carotte"}}
    }
  }
}

const aComponent = {
    name: "aComponent",
  template: `

        val1: {{mainObject.val1}}
        val2: {{mainObject.val2}}

    `,
  data: function() {
      return{
        mainObject: {
        val1: "foo",
        val2: "bar"
      }
    }
  },
  components: {
    subComponent
  }
}

new Vue({
  el: "#app",
    components: {
    aComponent
  }
})

Voici un JSFiddle montrant une mutation d'objet prop.

JSFiddle

Answer 1

Est-ce que muter une prop est une mauvaise pratique?

Oui totalement. Dans des applications plus complexes, il est très facile de perdre la trace de l'endroit/où/quoi est muté

Quelle est la bonne manière de gérer l'état à travers différents composants?

Dans de petits projets, vous pouvez vraiment faire ce que vous voulez, car vous serez probablement en mesure de suivre la logique - même après ne pas avoir regardé le projet pendant un an. Les possibilités incluent:

1. Muter les Props (pas beau mais fonctionnera)
2. Utiliser des événements pour muter l'état dans les composants parent; jetez un œil à l'EventBus (meilleur)
3. Utiliser un état partagé global; regardez Vuex (le meilleur, mais un peu plus de boilerplate)

Dans de grands projets, cependant, vous devriez absolument utiliser Vuex. C'est un module pour Vue qui ajoute un état partagé global à votre application, que vous pouvez accéder et muter depuis tous les endroits de votre application.

Answer 2

Je pense comprendre ce que vous essayez de faire. Vous souhaitez transmettre des données à un composant enfant, les muter, puis renvoyer ces données au composant parent.

Vous ne souhaitez jamais muter les données des props transmises au composant enfant. Cependant, vous POUVEZ muter un état local des données, qui pourrait être un clone exact de la prop.

Vous pouvez le faire de plusieurs manières, je utilise généralement une propriété calculée comme suggéré dans la documentation de Vue : https://vuejs.org/v2/guide/components-props.html

dans le retour calculé, renvoyez simplement les données entrantes de la propriété.