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

vuex-history

undo/redo functionality for Vuex store.

Features

  • 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 )

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: {
        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() {

            vuexHistory.saveSnapshot();

        },

        onPressUndoButton() {

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

        },

        onPressRedoButton() {

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

        },

        ...
    },
    ...

Constructor

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.

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 params of the state.
  • .clearHistory() — Clear history list.
  • .hasDifferenceFromLatest() — Returns a boolean. Whether there are diff from the latest snapshot or not.

Metadata

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