Создаем плагин Vuex Undo/Redo для VueJS

[vintage]

Алгоритмическая сложность undo: O(времени проведённом пользователем на странице). Такое себе решение. Почитайте лучше про diffTree: www.microsoft.com/en-us/research/wp-content/uploads/2015/02/paper-full.pdf

[bad4iz]

Спасибо отличная статья дала о многом задуматься.

[AlexeyCaTHaR]

А не проще ли применять мутацию обратную последней? чтобы постоянно не пересчитывать?

[Sirion]

Если хранить состояние с помощью Immutable.js, можно сохранять не мутации, а сами состояния (Immutable.js хитрый, и это, скорее всего, не вызовет большого оверхеда по памяти), и всё станет сильно проще. Но возникнут трудности с сериализацией.

[vintage]

Возникнут сложности с изменениями полученными от сервера, которые, внезапно, не надо откатывать.

[Sirion]

Поправьте меня, если я ошибаюсь: если мутации юзера не коммутативны с мутациями сервера, то всё так и так плохо. А если коммутативны, то можно выделить отдельное подмножество состояния, за которое отвечает юзер и которое можно сохранять в истории для undo/redo.

[vintage]

Любое состояние может меняться разными пользователями, так что ничего выделить не получится.

[Sirion]

Можно пример?

[vintage]

Пример чего? Данное сообщение, например, может быть отредактировано мною, админом. А в перспективе ещё и ботом каким-нибудь.

[Sirion]

Логично. И как в таком случае вы себе представляете undo/redo? Получается, максимум можно откатиться до последней правки, пришедшей из другого источника. Этот же результат вполне достижим с Immutable.js.

[vintage]

Ключевое в undo/redo — глагол do. Пользователь совершает какие-то действия, отменяет их и повторяет. Именно собственные действия, а не действия других пользователей и не состояние всего мира, которое меняется не только и не столько пользователем.

[gnaeus]

В принципе, эта проблема решена в MobX State Tree «из коробки». Изменения можно хранить в виде набора immutable снапшотов (как в Redux). Или в виде потока операций JSON Patch: можно применить операцию к стору, или применить обратную операцию, или отпарвить на сервер, и т.д. Жаль, что для Vue нет подобной библиотеки.