क्या पुर्जों में किसी घटक के प्रारंभिक डेटा को रीसेट करने का एक उचित तरीका है?

Question 1

मेरे पास डेटा शुरू करने के विशिष्ट सेट के साथ एक घटक है:

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
        }
}

यह एक मोडल विंडो के लिए डेटा है, इसलिए जब यह दिखाता है कि मैं चाहता हूं कि यह इस डेटा के साथ शुरू हो। यदि उपयोगकर्ता खिड़की से रद्द करता है तो मैं इसके लिए सभी डेटा रीसेट करना चाहता हूं।

मुझे पता है कि मैं डेटा को रीसेट करने के लिए एक विधि बना सकता हूं और बस मैन्युअल रूप से सभी डेटा गुणों को उनके मूल में सेट कर सकता हूं:

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

लेकिन यह वास्तव में मैला लगता है। इसका मतलब है कि अगर मैं कभी घटक के डेटा गुणों में बदलाव करता हूं तो मुझे यह सुनिश्चित करने की आवश्यकता होगी कि मुझे रीसेट विधि की संरचना को अपडेट करने की याद है। यह बिल्कुल मामूली नहीं है क्योंकि यह एक छोटा मॉड्यूलर घटक है, लेकिन यह मेरे मस्तिष्क की चीख के अनुकूलन हिस्से को बनाता है।

समाधान जो मैंने सोचा था कि प्रारंभिक डेटा गुणों को एक readyविधि में हथियाना होगा और फिर घटकों को रीसेट करने के लिए उस सहेजे गए डेटा का उपयोग करना होगा:

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;
    }
}

लेकिन initialDataConfigurationडेटा के साथ ऑब्जेक्ट बदल रहा है (जो समझ में आता है क्योंकि रीड मेथड में हमारे initialDataConfigurationडेटा फ़ंक्शन का दायरा बढ़ रहा है।

क्या गुंजाइश को विरासत में लिए बिना प्रारंभिक कॉन्फ़िगरेशन डेटा को हथियाने का एक तरीका है?

क्या मैं इसे खत्म कर रहा हूं और ऐसा करने का एक बेहतर / आसान तरीका है?

क्या प्रारंभिक डेटा को हार्डकोड करना एकमात्र विकल्प है?

Question 2

घटक के बाहर एक फ़ंक्शन में प्रारंभिक डेटा निकालें
घटक में प्रारंभिक डेटा सेट करने के लिए उस फ़ंक्शन का उपयोग करें
जरूरत पड़ने पर राज्य को रीसेट करने के लिए उस फ़ंक्शन का फिर से उपयोग करें।

// 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 (){
        Object.assign(this.$data, initialState());
    }
}

स्निपेट का विस्तार करें

Question 3

dataवर्तमान घटक उदाहरण में घटक को रीसेट करने के लिए आप यह कोशिश कर सकते हैं:

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

निजी तौर पर मेरे पास सार मोडल घटक है जो संवाद के विभिन्न भागों को भरने के लिए स्लॉट का उपयोग करता है। जब अनुकूलित मोडल उस सार मोडल को लपेटता है तो स्लॉट्स में संदर्भित डेटा मूल घटक दायरे से संबंधित होता है। यहां सार मोडल का विकल्प दिया गया है जो हर बार कस्टमाइज्ड मोडल (ES2015 कोड) दिखाया गया है।

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

आप निश्चित रूप से अपने मॉडल के कार्यान्वयन को ठीक कर सकते हैं - ऊपर कुछ cancelहुक में भी निष्पादित किया जा सकता है ।

यह ध्यान रखें कि $parentबच्चे से विकल्पों के उत्परिवर्तन की सिफारिश नहीं की जाती है, हालांकि मुझे लगता है कि यह उचित हो सकता है यदि मूल घटक केवल अमूर्त मोडल को अनुकूलित कर रहा है और इससे अधिक कुछ नहीं।

Question 4

सावधानी, Object.assign(this.$data, this.$options.data())संदर्भ को डेटा में बाँधती नहीं है ()।

तो इस का उपयोग करें:

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

cc यह उत्तर मूल रूप से यहाँ था

Question 5

यदि आप चेतावनियों से परेशान हैं, तो यह एक अलग तरीका है:

const initialData = () => ({})

export default {
  data() {
    return initialData();
  },
  methods: {
    resetData(){
      const data = initialData()
      Object.keys(data).forEach(k => this[k] = data[k])
    }
  }
}

स्निपेट का विस्तार करें

$ डेटा के साथ गड़बड़ करने की कोई जरूरत नहीं है।

Question 6

मुझे एक बाल घटक के अंदर मूल स्थिति में डेटा रीसेट करना था, यही मेरे लिए काम करता है:

माता-पिता घटक, बुला बच्चे के घटक विधि:

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

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

बाल घटक:

बाहरी फ़ंक्शन में डेटा को परिभाषित करना,
फ़ंक्शन के बाहर और बाहर डेटा ऑब्जेक्ट असाइन करना

ClearallData () विधि को परिभाषित करना जो मूल घटक द्वारा कॉल किया जाना है

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

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