Vue-undoable NPM

Vue-Undoable

Instead of implement a complete independent redo/undo system using Memento pattern that deep clone the entire state before each modification, The vue-undoable involves some small modifications of original application logic. You have to mannually notify the system which part of state to record before each undoable action, and the system take all the other stuffs form there.

Status:beta

This project is just splited from a bigger one and still in beta status. API may still change until I reach a stable version. Use it in production is not recommended in current phase.

Install

The recommended way to install and maintain vue-undoable in your project is through the Node.js Pacakge Manager (NPM), simply type the npm command in your project folder:

npm install vue-undoable

Usage

To use vue-undoable, you must install it as a Vue plugin with store included in options:

import VueUndoable from 'vue-undoable'

// Vuex store must be included in options.
Vue.install(VueUndoable, { store })

There are two ways to make an modification undoable, each modification can have it's own name(optional):

// In Vue component, use $archive()
methods: {
  UndoableModify () {
    this.$archive(['path/to/state/changes'], 'name of modification')
    // UpdateState()
  }
}

// Or in store action, use undoable/ARCHIVE action
actions: {
  UndoableAction ({ dispatch }, payload) {
    dispatch('undoable/ARCHIVE', { name: 'name of action', ['path/to/state/changes'] }, { root: true })
    // UpdateState()
  }
}

Once each modifcation is archived, you can use $undo() and $redo() to do what you want.