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

Program / 글쓴이

특정 시작 데이터 집합이있는 구성 요소가 있습니다.

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

답변