Есть ли правильный способ сброса исходных данных компонента в 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 все данные к этому.

Я знаю, что могу создать метод для reset данных и просто вручную установить все свойства данных обратно на их оригинал:

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

Но это кажется действительно неряшливым. Это означает, что если я когда-либо внес изменения в свойства данных компонента, мне нужно будет убедиться, что я не могу обновить структуру метода reset. Это не совсем ужасно, поскольку это небольшой модульный компонент, но он делает часть оптимизации моего мозга криком.

Решение, которое, как я думал, будет работать, заключается в том, чтобы захватить исходные свойства данных в методе ready, а затем использовать эти сохраненные данные для reset компонентов:

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 получает область действия функции данных.

Есть ли способ захватить исходные данные конфигурации без наследования области?

Я переусердствую это и там лучший/более простой способ сделать это?

Является ли hardcoding исходными данными единственным вариантом?

Ответы

Ответ 1

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

Ответ 2

В reset компонент data в текущем экземпляре компонента вы можете попробовать следующее:

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

В частном случае у меня есть абстрактный модальный компонент, который использует слоты для заполнения различных частей диалога. Когда настраиваемые модальные обертки, абстрактные модальные, данные, указанные в слотах, относятся к parent компонент. Вот вариант абстрактного модального метода, который сбрасывает данные каждый раз, когда отображается настроенный модальный код (код ES2015):

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

Вы можете точно настроить свою модальную реализацию - выше может быть также выполнено в некотором cancel hook.

Имейте в виду, что мутация параметров $parent от ребенка не рекомендуется, однако я думаю, что это может быть оправдано, если родительский компонент просто настраивает абстрактный модальный и ничего более.

Ответ 3

Внимание, Object.assign(this.$data, this.$options.data()) не связывает контекст в data().

Так что используйте это:

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

cc этот ответ был изначально здесь

Ответ 4

Мне пришлось сбросить данные в исходное состояние внутри дочернего компонента, вот что сработало для меня:

Родительский компонент, вызывающий метод дочернего компонента:

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

Ответ 5

Если вас раздражают предупреждения, это другой метод:

const initialData = () => ({})

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