vuex-undo-redo
v1.1.4
Published
A Vue.js plugin to undo/redo mutations
Downloads
1,176
Readme
vuex-undo-redo
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
Live demos
There's also a demo in this Codepen. The source code for the demo is here.
Installation
npm i --save-dev vuex-undo-redo
Browser
<script type="text/javascript" src="node_modules/vuex-undo-redo/dist/vuex-undo-redo.min.js"></script>
Module
import VuexUndoRedo from 'vuex-undo-redo';
Usage
Since it's a plugin, use it like:
Vue.use(VuexUndoRedo);
You must, of course, have the Vuex plugin installed as well, and it must be intalled before this plugin. You must also create a Vuex store which 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 });
}
}
});
Ignoring mutations
Occasionally, you may want to perform mutations without including them in the undo history (say you are working on an image editor and the user toggles grid visibility - you probably do not want this in undo history). The plugin has an ignoredMutations
setting to leave these mutations out of the history:
Vue.use(VuexUndoRedo, { ignoreMutations: [ 'toggleGrid' ]});
It's worth noting that this only means the mutations will not be recorded in the undo history. You must still manually manage your state object in the emptyState
mutation:
emptyState(state) {
this.replaceState({ myval: null, showGrid: state.showGrid });
}
API
Options
ignoredMutations
an array of mutations that the plugin will ignore
Computed properties
canUndo
a boolean which tells you if the state is undo-able
canRedo
a boolean which tells you if the state is redo-able
Methods
undo
undoes the last mutation
redo
redoes the last mutation