web-dev-qa-db-fra.com

Moyen approprié de réinitialiser les données dans VueJs 2.0

Je passais par cette réponse sur SO: Existe-t-il un moyen approprié de réinitialiser les données initiales d’un composant dans vuejs?

Cependant, la méthode actuelle n'est pas autorisée maintenant et VueJS interdit de modifier la variable $ data.

Comme vous pouvez le voir ici dans ce https://github.com/vuejs/vue/issues/2873 ($ data ne peut pas être modifié.)

Donc, si j'essaie la méthode ci-dessus, je reçois un avertissement VueJS: 

[Vue warn]: Évitez de remplacer l'instance racine $ data. Utiliser des données imbriquées propriétés à la place.

Voici mon code JS, 

function initialState () {
        return {
            h2: 0,
            ch4: 0,
            c2h6: 0,
            c2h4: 0,
            c2h2: 0,
            c3h8: 0,
            c3h6: 0,
            co: 0,
            co2: 0,
            o2: 0,
            n2: 0,
            selected: ''
        }
    }
    export default {
        name: 'something',
        data () {
            return initialState() // This is working fine 
        },
        computed: {
            tdcg: function () {
                // some logic here...
            }
        },
        methods: {
            resetFields: function () {
                this.$data = initialState() // --> This is what I want to achieve!
            }
        }
    }

Alors, quel est le moyen correct et le plus simple de réinitialiser mes données?

javascriptvue.jsvue-component
17
Sankalp Singha

Vous pouvez utiliser Object.assign pour parcourir toutes les propriétés et les affecter:

export default {
    data () {
        return {
            h2: 0,
            // other attributes...
        };
    },
    methods: {
        resetFields () {
            Object.assign(this.$data, this.$options.data.call(this));
        }
    }
}

Voici un violon de démonstration: https://jsfiddle.net/797yyvtz/

Remarque: J'utilise this.$options.data pour appeler à nouveau la méthode data d'origine afin d'obtenir une nouvelle copie des données. Pas besoin d'une fonction initialState séparée. La méthode datais la fonction d'état initiale.

35
Joseph Silber

Avez-vous essayé de parcourir l'objet initialState et de le définir à nouveau? Voici l exemple de code:

function initialState() {
    return {
        h2: 0,
        ch4: 0,
        // and so on... finally
        selected: ''
    }
}

export default {
    name: 'something',
    data: function() {
        return initialState()
    },
    computed: {
        // ...
    },
    methods: {
        resetFields: function() {
            // Fetch the initialState object locally, so we do not have to call the function again
            let initialData = initialState();
            // Iterate through the props
            for (let prop in initialData) {
                // Reset the prop locally.
                this[prop] = initialData[prop];
            }
        }
    }
}

Dans mes expériences limitées localement, cela semble fonctionner. Dites-moi ce que vous pensez de cette méthode.

2
Mani

Vous pouvez essayer ceci:

  1. Initialisez vos propriétés de données de formulaire avec les champs obligatoires. (Comme on le voit à l'étape 1)
  2. Créez un autre champ de données qui sera utilisé pour cloner les données de formulaire que vous souhaitez réinitialiser (voir Étape 2).
  3. Cloner les données de formulaire requises (ÉTAPE 3)
  4. Écrivez votre méthode de réinitialisation (étape 4)
  5. Utilisez ce que vous préférez (ÉTAPE 5)

export default {
  // Initialize your data
  data() {
    return {
      // Initialize the form field (STEP 1)
      formFields: {
        name: '',
        email: '',
        password: '',
        moreData: {
          field1: '',
          field2: [],
        },
      },
      // Create an object property used for cloning (STEP 2)
      formFieldsCopy: {},
    };
  },

  // When the DOM is mounted copy the
  // formField you want to a temporary field
  // You can use lodash ._clone or ES6 spread operator (STEP 3)
  mounted() {
    this.formFieldsCopy = { ...this.formFields
    };
  },
  methods: {
    // Write the function to reset the form (STEP 4)
    resetFormFields() {
      this.formFields = { ...this.formFieldsCopy
      };
    },
    submit() {
      // Do you normal Axios requests here
      // and call you reset function. (STEP 5).
      this.resetFormFields();
    },
  },
};

1
Ikechi

Enveloppez toutes les données dans un dict avec une clé appelée "données" ou autre chose. Ensuite, vous pouvez réinitialiser toutes les données en définissant this.data = {xx: yy}, ou modifier directement un élément de données tel que this.data.h2 = 2.

function initialState () {
    return {
        h2: 0,
        ch4: 0,
        c2h6: 0,
        c2h4: 0,
        c2h2: 0,
        c3h8: 0,
        c3h6: 0,
        co: 0,
        co2: 0,
        o2: 0,
        n2: 0,
        selected: ''
    }
}
export default {
    name: 'something',
    data () {
        return {data: initialState()} // This is working fine 
    },
    computed: {
        tdcg: function () {
            // some logic here...
        }
    },
    methods: {
        resetFields: function () {
            this.data = initialState() // --> This is what I want to achieve!
        }
    }
}
1
seaify - Freelancer

Ma solution:

mounted(){
    this.saveData() // you can load if you need previous data
},
methods: {
    saveData(){
        localStorage.setItem(this.$options.name,JSON.stringify(this.$data));
    },
    loadData(){
        if (localStorage.getItem(this.$options.name) !== null) {
            let data= JSON.parse(localStorage.getItem(this.$options.name));
            Object.keys(data).forEach((key)=>{this[key] = data[key];});
        }
    }
}

Lorsque vous avez besoin, vous pouvez les charger ou les sauvegarder à nouveau

1
Mohsen