web-dev-qa-db-fra.com

Existe-t-il un moyen approprié de réinitialiser les données initiales d’un composant dans les vues?

J'ai un composant avec un ensemble spécifique de données de départ:

data: function (){
    return {
        modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue'
        submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes'
        addressToConfirm: null,
        bestViewedByTheseBounds: null,
        location:{
            name: null,
            address: null,
            position: null
        }
}

Ce sont des données pour une fenêtre modale, donc quand il montre que je veux que ça commence avec ces données. Si l'utilisateur annule depuis la fenêtre, je souhaite réinitialiser toutes les données. 

Je sais que je peux créer une méthode pour réinitialiser les données et simplement redéfinir manuellement toutes les propriétés de données sur leur propriété d'origine:

reset: function (){
    this.modalBodyDisplay = 'getUserInput';
    this.submitButtonText = 'Lookup';
    this.addressToConfirm = null;
    this.bestViewedByTheseBounds = null;
    this.location = {
        name: null,
        address: null,
        position: null
    };
}

Mais cela semble vraiment bâclé. Cela signifie que si je modifie un jour les propriétés de données du composant, je devrai penser à mettre à jour la structure de la méthode de réinitialisation. Ce n'est pas absolument horrible puisqu'il s'agit d'un petit composant modulaire, mais cela fait hurler la partie optimisation de mon cerveau. 

La solution qui, à mon avis, fonctionnerait serait de récupérer les propriétés de données initiales dans une méthode ready, puis d'utiliser ces données sauvegardées pour réinitialiser les composants:

data: function (){
    return {
        modalBodyDisplay: 'getUserInput', 
        submitButtonText: 'Lookup', 
        addressToConfirm: null,
        bestViewedByTheseBounds: null,
        location:{
            name: null,
            address: null,
            position: null
        },
        // new property for holding the initial component configuration
        initialDataConfiguration: null
    }
},
ready: function (){
    // grabbing this here so that we can reset the data when we close the window.
    this.initialDataConfiguration = this.$data;
},
methods:{
    resetWindow: function (){
        // set the data for the component back to the original configuration
        this.$data = this.initialDataConfiguration;
    }
}

Mais l'objet initialDataConfiguration change en même temps que les données (ce qui est logique car dans la méthode de lecture, notre initialDataConfiguration obtient la portée de la fonction de données. 

Existe-t-il un moyen de récupérer les données de configuration initiales sans hériter de la portée? 

Est-ce que je réfléchis trop et qu'il existe un moyen meilleur/plus simple de le faire? 

Le codage en dur des données initiales est-il la seule option?

javascriptmvvmvue.js
39
Chris Schmitz
  1. extraire les données initiales dans une fonction extérieure au composant
  2. utiliser cette fonction pour définir les données initiales dans le composant
  3. réutilisez cette fonction pour réinitialiser l'état si nécessaire.

// outside of the component:
function initialState (){
  return {
    modalBodyDisplay: 'getUserInput', 
    submitButtonText: 'Lookup', 
    addressToConfirm: null,
    bestViewedByTheseBounds: null,
    location:{
      name: null,
      address: null,
      position: null
    }
  }
}

//inside of the component:
data: function (){
    return initialState();
} 


methods:{
    resetWindow: function (){
        this.$data = initialState();
    }
}

62
Linus Borg

Pour réinitialiser le composant data dans une instance de composant actuelle, vous pouvez essayer ceci:

Object.assign(this.$data, this.$options.data())

En privé, j'ai un composant modal abstrait qui utilise des slots pour remplir différentes parties du dialogue. Lorsque les modaux personnalisés enveloppent ce modal abstrait, les données référencées dans les slots appartiennent à parent Composant scope. Voici l'option du modal abstrait qui réinitialise les données chaque fois que le modal personnalisé est affiché (code ES2015):

watch: {
    show (value) { // this is prop's watch
      if(value) {
        Object.assign(this.$parent.$data, this.$parent.$options.data())
      }
    }
}

Vous pouvez bien sûr ajuster votre implémentation modale - ci-dessus peut également être exécuté dans un hook cancel.

N'oubliez pas que la mutation des options $parent de l'enfant n'est pas recommandée. Toutefois, je pense que cela pourrait être justifié si le composant parent ne fait que personnaliser le modal abstrait, sans plus.

26
gertas

Je devais réinitialiser les données à leur état d'origine dans un composant enfant, voici ce qui a fonctionné pour moi:

Composant parent, en appelant la méthode du composant enfant: 

     <button @click="$refs.childComponent.clearAllData()">Clear All</button >

     <child-component ref='childComponent></child-component>

Composant enfant: 

  1. définir des données dans une fonction externe, 
  2. affectation de l'objet de données à une fonction extérieure 

  3. définir la méthode clearallData () à laquelle le composant parent doit faire appel

    function initialState() {
   return { 
     someDataParameters : '',
     someMoreDataParameters: ''
          }
  }

export default {
   data() {
    return initialState();
  },
    methods: {
  clearAllData() {
  Object.assign(this.$data, initialState());
},
0
Armin