vue-undo-redo-stack
v1.0.0
Published
A simple Vue Mixin that adds an undo/redo stack to any Vue Component
Downloads
533
Readme
Vue Undo Redo Stack
This simple mixin adds unopinionated undo/redo logic to a Vue Mixin. You can easily control what data is added to the undo/redo stack.
Installation
With NPM:
npm install --save-dev vue-undo-redo-stack
With Yarn:
yarn add vue-undo-redo-stack
Usage
Add the Mixin to any Vue Component and implement a checkpointData
computed property and a restoreCheckpoint()
method:
<template>
<!-- ... -->
</template>
<script>
import vueUndoRedo from 'vue-undo-redo';
export default {
name: 'my-component',
mixins: [vueUndoRedo], // 1. Add the mixin
/* ... */
computed: {
checkpointData() {
return this.name; // 2. Declare what data to stack when this.checkpoint() is called
},
},
methods: {
restoreCheckpoint(checkpointData) {
this.name = checkpointData; // 3. Restore the component's properties given the to-be-restored checkpoint's data
},
},
}
</script>
Three methods are made available on this component:
this.checkpoint()
- Sends the value ofthis.checkpointData
to the stackthis.undo()
this.redo()
These methods can be used as follows to enable undo and redo functionality:
<template>
<!-- ... -->
</template>
<script>
import vueUndoRedo from 'vue-undo-redo';
export default {
name: 'my-component',
/* ... */
data() {
return {
name: 'Ben',
};
},
methods: {
someLogic() {
this.name; // Ben
this.checkpoint(); // Saves name
this.name = 'James';
this.checkpoint(); // Saves name
this.undo();
this.name; // Ben
this.redo();
this.name; // James
},
},
}
</script>
Acknowledgements
Adapted from ember-undo-stack.