มีวิธีที่เหมาะสมในการรีเซ็ตข้อมูลเริ่มต้นของส่วนประกอบใน vuejs หรือไม่?

ฉันมีส่วนประกอบที่มีชุดข้อมูลเริ่มต้นเฉพาะ:

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ได้รับขอบเขตของฟังก์ชันข้อมูล

มีวิธีการดึงข้อมูลการกำหนดค่าเริ่มต้นโดยไม่สืบทอดขอบเขตหรือไม่?

ฉันคิดเรื่องนี้มากเกินไปและมีวิธีที่ดีกว่า / ง่ายกว่านี้ไหม

การเข้ารหัสข้อมูลเริ่มต้นเป็นทางเลือกเดียวหรือไม่

1. แยกข้อมูลเริ่มต้นออกเป็นฟังก์ชันภายนอกส่วนประกอบ
2. ใช้ฟังก์ชันนั้นเพื่อตั้งค่าข้อมูลเริ่มต้นในคอมโพเนนต์
3. ใช้ฟังก์ชันนั้นซ้ำเพื่อรีเซ็ตสถานะเมื่อจำเป็น

// 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());
    }
}

ในการรีเซ็ตองค์ประกอบ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ไม่แนะนำให้ใช้การกลายพันธุ์ของตัวเลือกจากเด็กอย่างไรก็ตามฉันคิดว่ามันอาจจะเป็นธรรมหากองค์ประกอบหลักเป็นเพียงการปรับแต่งโมดอลนามธรรมและไม่มีอะไรเพิ่มเติม

ข้อควรระวังObject.assign(this.$data, this.$options.data())อย่าผูกบริบทเข้ากับข้อมูล ()

ดังนั้นใช้สิ่งนี้:

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

cc คำตอบนี้เดิมอยู่ที่นี่

หากคุณรู้สึกรำคาญกับคำเตือนนี่เป็นวิธีการอื่น:

const initialData = () => ({})

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

ไม่ต้องยุ่งกับ $ data

ฉันต้องรีเซ็ตข้อมูลเป็นสถานะดั้งเดิมภายในองค์ประกอบลูกนี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน:

องค์ประกอบหลักเรียกเมธอดขององค์ประกอบลูก:

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

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

องค์ประกอบของเด็ก:

1. การกำหนดข้อมูลในฟังก์ชันภายนอก
2. การกำหนดอ็อบเจ็กต์ข้อมูลและฟังก์ชันภายนอก

3. การกำหนดเมธอด clearallData () ที่จะเรียกใช้โดยคอมโพเนนต์หลัก

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