Có cách nào thích hợp để đặt lại dữ liệu ban đầu của một thành phần trong vuejs không?

Tôi có một thành phần với một bộ dữ liệu bắt đầu cụ thể:

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

Đây là dữ liệu cho một cửa sổ phương thức, vì vậy khi nó hiển thị, tôi muốn nó bắt đầu với dữ liệu này. Nếu người dùng hủy khỏi cửa sổ, tôi muốn đặt lại tất cả dữ liệu thành này.

Tôi biết tôi có thể tạo một phương pháp để đặt lại dữ liệu và chỉ cần đặt thủ công tất cả các thuộc tính dữ liệu về ban đầu:

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

Nhưng điều này có vẻ thực sự cẩu thả. Có nghĩa là nếu tôi thực hiện thay đổi đối với các thuộc tính dữ liệu của thành phần, tôi sẽ cần đảm bảo rằng tôi nhớ cập nhật cấu trúc của phương thức đặt lại. Điều đó không hoàn toàn kinh khủng vì nó là một thành phần mô-đun nhỏ, nhưng nó khiến phần tối ưu hóa trong não của tôi kêu gào.

Giải pháp mà tôi nghĩ sẽ hiệu quả là lấy các thuộc tính dữ liệu ban đầu trong một readyphương thức và sau đó sử dụng dữ liệu đã lưu đó để đặt lại các thành phần:

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

Nhưng initialDataConfigurationđối tượng đang thay đổi cùng với dữ liệu (điều này có ý nghĩa vì trong phương thức đọc, chúng ta initialDataConfigurationđang nhận phạm vi của hàm dữ liệu.

Có cách nào để lấy dữ liệu cấu hình ban đầu mà không kế thừa phạm vi không?

Tôi có suy nghĩ quá nhiều về điều này và có cách nào tốt hơn / dễ dàng hơn để làm điều này không?

Mã cứng dữ liệu ban đầu có phải là lựa chọn duy nhất không?

1. trích xuất dữ liệu ban đầu vào một hàm bên ngoài thành phần
2. sử dụng hàm đó để đặt dữ liệu ban đầu trong thành phần
3. sử dụng lại chức năng đó để thiết lập lại trạng thái khi cần thiết.

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

Để đặt lại thành phần datatrong phiên bản thành phần hiện tại, bạn có thể thử cách này:

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

Riêng tư, tôi có thành phần phương thức trừu tượng sử dụng các khe để lấp đầy các phần khác nhau của hộp thoại. Khi phương thức tùy chỉnh bao bọc phương thức trừu tượng đó, dữ liệu được giới thiệu trong các vị trí thuộc phạm vi thành phần mẹ . Đây là tùy chọn của phương thức trừu tượng để đặt lại dữ liệu mỗi khi phương thức tùy chỉnh được hiển thị (mã ES2015):

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

Tất nhiên, bạn có thể tinh chỉnh việc triển khai phương thức của mình - phần trên cũng có thể được thực thi trong một số cancelhook.

Hãy nhớ rằng $parentkhông khuyến khích đột biến tùy chọn từ con, tuy nhiên tôi nghĩ có thể hợp lý nếu thành phần cha chỉ đang tùy chỉnh phương thức trừu tượng và không có gì khác.

Thận trọng, Object.assign(this.$data, this.$options.data())không ràng buộc ngữ cảnh vào dữ liệu ().

Vì vậy, hãy sử dụng cái này:

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

cc câu trả lời này ban đầu ở đây

Nếu bạn thấy khó chịu với các cảnh báo, đây là một phương pháp khác:

const initialData = () => ({})

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

Không cần phải làm rối với dữ liệu $.

Tôi đã phải đặt lại dữ liệu về trạng thái ban đầu bên trong thành phần con, đây là những gì phù hợp với tôi:

Thành phần cha, gọi phương thức của thành phần con:

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

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

Thành phần con:

1. xác định dữ liệu trong một hàm bên ngoài,
2. gán đối tượng dữ liệu cho và bên ngoài chức năng

3. định nghĩa phương thức clearallData () sẽ được gọi bởi thành phần mẹ

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