Create a Vuex Undo /Redo plugin for VueJS

 3r33434. 3r3-31.
Create a Vuex Undo /Redo plugin for VueJS
3r33333.  3r33434.
There are many advantages to centralizing the status of your application in the Vuex store. One advantage is that all transactions are recorded. This allows you to use handy features like
debugging on runtime
where you can switch between previous states to separate execution tasks.
3r33333.  3r33434.
In this article, I will show you how to create the Undo /Redo function further on the Rollback /Return using Vuex, which works similarly to debugging during debug. This feature can be used in various scenarios, from complex forms to browser-based games.
3r33333.  3r33434.
You can check ready code here, on github and try the demo in this Codepen . I also created a plugin as an NPM module called vuex-undo-redo if you want to use it in a project.
my demo to test it.
3r33333.  3r33434.
Public API
3r33333.  3r33434.
In my demonstration, you will notice that the cancel and return buttons are disabled if their functionality is not currently possible. For example, if there were no commits yet, you obviously cannot undo or redo. A developer using this plugin may want to implement this functionality.
3r33333.  3r33434.
To allow this, the plugin can provide two calculated properties 3r33385. canUndo and 3r33385. canRedo as part of a public API. This is trivial to implement:
3r33333.  3r33434. 3r33333. module.exports = {
install (Vue) {
Vue.mixin ({3r33422. Data () {}, 3r33422. Created () {}, 3rr3422. Methods: {}, 3r33422. Computed: {}, 3r33422. Computed: {3r33422 . canRedo () {
return this.undone.length;
},
canUndo () {
return this.done.length;
}
},
}; 3r33434.},
}
3r33410. 3r33418. 3r33434. 3r33434. 3r33434. 3r3155. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r31616. 3r33434. 3r33418. 3r33434. 3r33434. 3r33434. 3r33434.
+ 0 -

Add comment