Статьи

Создайте плагин Vuex Undo / Redo для Vue.js

Есть много преимуществ для централизации состояния вашего приложения в магазине Vuex. Одним из преимуществ является то, что все транзакции записываются. Это позволяет использовать удобные функции, такие как отладка во времени, где вы можете переключаться между предыдущими состояниями, чтобы изолировать проблемы.

В этой статье я покажу, как создать функцию отмены / возврата с помощью Vuex , которая работает аналогично отладке во время путешествия. Эта функция может использоваться в различных сценариях от сложных форм до игр на основе браузера.

Вы можете проверить готовый код здесь, на GitHub , и попробовать демо в этом Codepen . Я также создал плагин как модуль NPM под названием vuex-undo-redo, если вы хотите использовать его в проекте.

Настройка плагина

Чтобы сделать эту функцию многократно используемой, мы создадим ее как плагин Vue. Эта функция требует от нас добавления некоторых методов и данных в экземпляр Vue, поэтому мы структурируем плагин как миксин.

plugin.js


JavaScript