Skip to content
Undo/Redo for Vuex, with manual taking state-snapshots at desired timing
Branch: master
Clone or download
Latest commit 6625681 May 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist build May 17, 2018
examples update readme and examples Apr 19, 2018
src find polyfill Apr 26, 2018
.babelrc add examples Apr 19, 2018
.gitignore add examples Apr 19, 2018
.npmignore add examples Apr 19, 2018
package-lock.json 1.0.1 May 17, 2018
package.json 1.0.1 May 17, 2018
readme.md update readme May 17, 2018
rollup.config.js add examples Apr 19, 2018

readme.md

vuex-history

undo/redo functionality for Vuex store.

Features

  • Vue friendly.
  • You can take state-snapshots manually at desired timings
  • vuex-history watches specific properties in the state of the store.
  • You can have multiple history-lists (e.g. history list for main view + history list for side panel )

Examples

Usage

import Vue from 'vue';
import VuexHistory from 'vuex-history';

Vue.use( VuexHistory );

// make your store with Vuex.
const store = new Vuex.Store( {
	state: {
		propA: 0,
		propB: 'abc',
		//... snip
	},
	//... snip
} );

// make a history instance with specific state.
const watchStateNames = [ 'propA' ];
const maxHistoryLength = 50;
const vuexHistory = new VuexHistory( store, watchStateNames, maxHistoryLength );

// save snapshots, undo and redo in your component
// You can also make a mixin. See the examples ↑.

	//... snip
	methods: {

		onValueChangeEnd() {

			vuexHistory.saveSnapshot();

		},

		onPressUndoButton() {

			if ( vuexHistory.canUndo ) vuexHistory.undo();

		},

		onPressRedoButton() {

			if ( vuexHistory.canRedo ) vuexHistory.redo();

		},

		//... snip
	},
	//... snip

Constructor

VuexHistory( store, watchStateNames, maxHistoryLength );
  • store — Vuex store instance.
  • watchStateNames — property names of the state, in an array. use '/' for namespaced(nested) modules. e.g. : [ 'rootParam1' ,'moduleName/paramA' ]
  • maxHistoryLength — Optional. Default is 20.

Properties

  • .canUndo — Read only. Whether undo-able or not in a boolean.
  • .canRedo — Read only. Whether redo-able or not in a boolean.

Methods

  • .undo() — undo.
  • .redo() — redo.
  • .saveSnapshot() — save snapshot of properties of the state.
  • .clearHistory() — Clear history list.
  • .hasDifferenceFromLatest() — Returns a boolean. Whether there are diff from the latest snapshot or not.
You can’t perform that action at this time.