anthonygore/vuex-undo-redo

Undo/Redo plugin for Vuex

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

vuex-undo-redo's Issues

Missing LICENSE file

Have you considered adding a LICENSE file?

(I saw that your package.json specifies MIT as the license, but GitHub doesn't seem to recognize that yet.)

mutation payload as array - fail

This code doesn't support mutation payloads that are arrays. The undo and redo simply detects them as standard objects and any array-reliant code in the mutation subsequently fails.

Using "Vue.Use(VuexUndoRedo)" causes: "TypeError: Cannot read property 'subscribe' of undefined"

Looks promising this Undo Redo component!

Unfortunately I get an error when add/uncommenting:
Vue.use(VuexUndoRedo)

Using Chrome browser I get:

vue.esm.js?efeb:1741 TypeError: Cannot read property 'subscribe' of undefined
at VueComponent.created (plugin.js?d365:14)
at callHook (vue.esm.js?efeb:2921)
at VueComponent.Vue._init (vue.esm.js?efeb:4630)
at new VueComponent (vue.esm.js?efeb:4798)
at validateModel (index.js?112c:488)
at VueComponent.data (index.js?112c:510)
at VueComponent.mergedDataFn (vue.esm.js?efeb:1169)
at VueComponent.mergedDataFn (vue.esm.js?efeb:1169)
at getData (vue.esm.js?efeb:3417)
at initData (vue.esm.js?efeb:3374)

Added the mutation emptyState in all the stores ( core and admin which are namespaced ).

My package.json:

"vue": "^2.5.16",
"vue-loader": "^14.2.2",
"vue-resource": "^1.5.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.16",
"vuelidate": "^0.6.2",
"vuex": "^3.0.1",
"vuex-undo-redo": "^1.0.5",

Thanks for any help!

Usage with Vuex Modules

Hello, i am using Vuex Modules because my store is quite big.
I have 1 module where i want to use this undo / redo functionality, the rest of the modules should be ignored.

Is it possible for me to integrate this easily?

Thanks in advance!

Undo / Redo on a String changes it to an Object

When I modify a state property that is a String, then redo, the state object is changed from a String to an Object. This causes things to display incorrectly.

Example:
default: Hello World
change: Hello World 42
undo: Hello World
redo: { "0": "H", "1": "e", "2": "l", "3": "l", "4": "o", "5": " ", "6": "W", "7": "o", "8": "r", "9": "l", "10": "d", "11": " ", "12": "4", "13": "2" }

Types for TS

Hello, When i'm trying to install into vue with typescript it's also wanted types for this, where can i get them?

Missing release tags

@anthonygore Would it be possible to push your release/version tags to GitHub?

Why --save-dev?

Is there a reason why the installation step says to add the --save-dev flag? My understanding is that --save-dev is for things that you don't truly need for the application to run. Like unit tests. But this seems like something that you do require for the application to run. Ie. if you don't have this package in production, the undo and redo buttons wouldn't work.

Also, --save happens automatically now, so it isn't needed. (I mention this in case you feel that --save-dev should be--save.)

Accessing vuex-undo-redo from multiple components

Context: I ran into the following caveat when accessing vuex-undo-redo from two components:

• Component A provides buttons to undo/redo.
• Component B attaches a global keydown handler (document.addEventListener("keydown", this.handleKeydown);) and provides undo/redo via keyboard shortcuts.

Problem: When undoing/redoing via the keyboard shortcuts, the Vuex state changed to the desired state, but the undo count increased (with mutation duplicates) and the redo count remained 0.

Workaround: The problem did not appear when I attached the document event listener within the same component.

Observation: To debug, I temporarily worked with a local copy of the plugin and inserted console.log calls also inside the this.$store.subscribe handler. This allowed me to observe that the handler was called multiple times for each mutation (probably once per instanciated Vue component, because the number increased with increasing "elements" on the display).

Has anybody seen this in the wild and got an explanation or a solution?

Have you pushed the latest to npm?

When I npm i --save-dev vuex-undo-redoI am not getting the latest version.

issue with Vue-Idle

I am using Vue-Idle ,so after 30 second new mtation run ,which make "redo" stack empty.. because in plugin code Undone array become empty on new mutation.
created() {
if (this.$store) {
this.$store.subscribe(mutation => {
if (mutation.type !== EMPTY_STATE && this.ignoreMutations.indexOf(mutation.type) === -1) {
this.done.push(mutation);
}
if (this.newMutation) {
this.undone = []; } This array casue issue after idle mutation and redo button change to disbaled
});
}
},

How to use this on Modular state

Very interested vuex plugin,

Can you tell me how to use this on Vuex module state?

Let's say I have something like this

const store = new Vuex.Store({
	modules: {
		user,
	}
}

const user = {
	namespaced: true,
	state: {
		userId: 0,
	}
}

Where should I place the emptyState mutation?

Bug: vuex-undo-redo subscribes once per component

I'm trying to trace down performance issues with regard to the undo functionality provided by this plugin.

When adding a console.log statement to created() here:

vuex-undo-redo/src/plugin.js

Lines 17 to 28 in 6e34a39

	created() {
	if (this.$store) {
	this.$store.subscribe(mutation => {
	if (mutation.type !== EMPTY_STATE && this.ignoreMutations.indexOf(mutation.type) === -1) {
	this.done.push(mutation);
	}
	if (this.newMutation) {
	this.undone = [];
	}
	});
	}
	},

I noticed that this callback is actually called several times, basically once for each created component, which leads to Vuex accumulating hundreds of subscribers.

I'm not sure how to fix this though.

Grouping and filtering actions

Hi,

I'm working on converting something I wrote with React/Redux to a Vue app. It's a fairly simple editor-type tool which needs undo/redo functionality.

The two things this plugin (I realise it's probably somewhat PoC) is missing I actually need are grouping of actions and filtering of actions. The use cases:

• Grouping -> I have some actions that fire many, many times (updated when user drags and object) and obviously it would make sense to undo the entire move instead of doing it one by one.

• Filtering -> There are actions I don't want undo for. Say, user toggles a grid view in the editor.

I was going to start working on these but I figured I'd ask here first if you have any ideas already (or better yet, if you have them done ;)). I suppose the filtering use case could even work on a per module basis at first. The grouping could be a bit trickier.

Add useful undo/redo parameters to go N back/forward or go to N step.

To save some performance, I wish I could do that.