Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vuex-history with all npm packages installed. Try it out:

var vuexHistory = require("vuex-history")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vuex-history v1.0.1


undo/redo functionality for Vuex store.


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



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

Vue.use( VuexHistory );

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

// make a history instance with specific state.
const watchStateNames = [ 'stateA' ];
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 ↑.

    methods: {

        onValueChangeEnd() {



        onPressUndoButton() {

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


        onPressRedoButton() {

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




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


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


  • .undo() — undo.
  • .redo() — redo.
  • .saveSnapshot() — save snapshot of params of the state.
  • .clearHistory() — Clear history list.
  • .hasDifferenceFromLatest() — Returns a boolean. Whether there are diff from the latest snapshot or not.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free