vuejs에서 구성 요소의 초기 데이터를 재설정하는 적절한 방법이 있습니까?

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())컨텍스트를 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])
    }
  }
}

스 니펫 확장

$ data를 엉망으로 만들 필요가 없습니다.

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