ভাইয়েজে কোনও উপাদানটির প্রাথমিক ডেটা পুনরায় সেট করার কোনও সঠিক উপায় আছে কি?

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

সিসি এই উত্তরটি এখানে মূলত ছিল

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>

শিশু উপাদান:

বাইরের ফাংশনে ডেটা সংজ্ঞায়িত করা,
ফাংশন এবং বাইরের ফাংশন ডেটা অবজেক্ট বরাদ্দ

ক্লিয়ারালডেটা () পদ্ধতিটি সংজ্ঞায়িত করে যা পিতামাতার উপাদান দ্বারা ডাকে

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

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