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

しかし、これは本当にずさんなようです。つまり、コンポーネントのデータプロパティに変更を加えた場合は、resetメソッドの構造を更新することを忘れないようにする必要があります。それは小さなモジュラーコンポーネントなので、それは絶対に恐ろしいことではありませんが、それは私の脳の最適化部分を悲鳴を上げさせます。

私がうまくいくと思った解決策は、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オブジェクトはデータとともに変化しています（これは、readメソッドでは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());
},