Сохранить или отменить изменения в vue / vuex

Question

У меня есть компонент, который обрабатывает некоторые пользовательские данные, такие как firstName, lastName и т. Д. Через входные данные (текстовые поля, пользовательские выборки и т. Д.)

Есть хранилище vuex, хранящее эти данные, и компонентполя связаны с v-model.

Я хочу, чтобы эти поля были редактируемыми, но в тот момент, когда пользователь начинает редактировать одно из полей, должны появиться кнопки Save и Cancel.

Нажатие Save кнопки применяет изменения, и нажатие Cancel должно вернуть все поля в состояние, в котором они находились до начала редактирования.

Мне интересно, есть ли какой-нибудь лучший метод / шаблон для этой задачи

Answer 1

Я не знаю, является ли это лучшей практикой, но я могу объяснить, как я справился с чем-то подобным.У меня есть 2 свойства, formFieldsModified и formFieldsInitialState.

data() {
    return {
        formFieldsModified: false,
        formFieldsInitialState: {}
    }
}

Когда компонент монтируется / создается, я вызываю метод с именем setFormFieldsInitialState.

created: function () {
    this.$store.dispatch('LOAD_USER').then((item) => {
        this.setFormFieldsInitialState()
    });
}

Это использует lodash для создания глубокого клона объекта, чтобы я мог сравнить его с текущим user объектом и посмотреть, изменилось ли что-нибудь.

setFormFieldsInitialState() {
    this.formFieldsInitialState = _.cloneDeep(this.user)
    this.formFieldsModified = false;
}

Тогда выможно наблюдать за изменениями в модели, скажем, она называется user.

watch: {
    'user': {
        handler: function (val) {
            this.formFieldsModified = (!_.isEqual(val, this.formFieldsInitialState)) ? true : false;
        },
        deep: true
    }
}

Теперь вы можете использовать this.formFieldsModified для переключения видимости ваших кнопок в зависимости от того, было ли изменено какое-либо из полей формы.

Насколько отменить / сохранитьдействия - у вас должен быть другой метод, который фактически обновляет ваш магазин, поэтому, если пользователь не нажмет кнопку «Сохранить» и не отправит действие, которое обновит магазин, ничего не произойдет.Затем вы можете использовать объект formFieldsInitialState, который был создан, чтобы вернуть любые значения обратно к их первоначальным значениям.