vue-undo-redo-stack

A simple Vue Mixin that adds an undo/redo stack to any Vue Component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-undo-redo-stack
1.0.04 years ago4 years agoMinified + gzip package size for vue-undo-redo-stack in KB

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 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.