A Vue.js plugin that allows you to undo or redo a mutation.
The building of this plugin is documented in the article Create A Vuex Undo/Redo For VueJS
There's also a demo in this Codepen. The source code for the demo is here.
npm i --save-dev vuex-undo-redo
<script type="text/javascript" src="node_modules/vuex-undo-redo/dist/vuex-undo-redo.min.js"></script>
import VuexUndoRedo from 'vuex-undo-redo';
Since it's a plugin, use it like:
Vue.use(VuexUndoRedo);
You must, of course, have a Vuex store installed. This Vuex store must implement a mutation emptyState
which should revert the store back to the initial state e.g.:
new Vuex.Store({
state: {
myVal: null
},
mutations: {
emptyState() {
this.replaceState({ myval: null });
}
}
});
canUndo
a boolean which tells you if the state is undo-able
canRedo
a boolean which tells you if the state is redo-able
undo
undoes the last mutation
redo
redoes the last mutation