vue-undo-redo-stack

1.0.0 • Public • Published

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 of this.checkpointData to the stack
  • this.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.

Readme

Keywords

Package Sidebar

Install

npm i vue-undo-redo-stack

Weekly Downloads

227

Version

1.0.0

License

MIT

Unpacked Size

5.22 kB

Total Files

3

Last publish

Collaborators

  • sir-dunxalot