Блог

Я создаю функцию отмены / повтора в VueJS. Я watch изменяю настройки и добавляю новый элемент в массив изменений при изменении настроек. У меня также есть метод отмены при нажатии кнопки отмены.

Однако, когда кнопка нажата и последняя настройка отменяется, настройки изменяются, и просмотр запускается снова.

Как я могу предотвратить добавление нового элемента в массив изменений, если настройки изменились, но это произошло из-за нажатия кнопки отмены?

 (function () {

var Admin = {};
Admin.init = function () {

};

var appData = {
    settings: {
        has_border: true,
        leave_reviews: true,
        has_questions: true
    },
    mutations: [],
    mutationIndex: null,
    undoDisabled: true,
    redoDisabled: true
};

var app = new Vue({
    el: '#app',
    data: appData,
    methods: {
        undo: function() {
            if (this.mutations[this.mutationIndex - 1]) {
                let settings = JSON.parse(this.mutations[this.mutationIndex - 1]);
            
                this.settings = settings;
                this.mutationIndex = this.mutations.length - 1;
                
                console.log (settings);
            }
        },
        redo: function() {
            
        }
    },
    computed: {
        border_class: {
            get: function () {
                return this.settings.has_border ? ' rp-pwb' : ''
            }
        },
        undo_class: {
            get: function () {
                return this.undoDisabled ? ' disabled' : ''
            }
        },
        redo_class: {
            get: function () {
                return this.redoDisabled ? ' disabled' : ''
            }
        }
    },
    watch: {
        undoDisabled: function () {
            return this.mutations.length;
        },
        redoDisabled: function () {
            return this.mutations.length;
        },
        settings: {
            handler: function () {

                let mutation = JSON.stringify(this.settings),
                    prevMutation = JSON.stringify(this.mutations[this.mutations.length-1]);

                if (mutation !== prevMutation) {
                    this.mutations.push(mutation);
                    this.mutationIndex = this.mutations.length - 1;
                    this.undoDisabled = false;
                }
            },
            deep: true
        }
    }
});

Admin.init();
})();
  

Поскольку вы вносите изменения нажатием кнопки, вы можете создать метод для достижения своей цели вместо использования наблюдателей.

 methods: {
   settings() {
      // call this method from undo and redo methods if the conditions are met.
      // move the watcher code here.
   }
}
  

КСТАТИ,
Если вы не используете сеттер в вычисляемых свойствах, вам не нужны геттеры, так что этого достаточно:

 border_class() {
    return this.settings.has_border ? ' rp-pwb' : ''
},
  

Эти коды наблюдателей выглядят как принадлежащие вычисленным:

 undoDisabled() {
    return this.mutations.length;
},
redoDisabled() {
    return this.mutations.length;
},