undo-redo-vuex v1.4.0

undo-redo-vuex

A Vuex plugin for module namespaced undo and redo functionality. This plugin takes inspiration from and extends the work of vuex-undo-redo.

Installation

yarn add undo-redo-vuex

Browser

<script type="text/javascript" src="node_modules/undo-redo-vuex/dist/undo-redo-vuex.min.js"></script>

Module

import undoRedo from 'undo-redo-vuex';

Usage

As a standard plugin for Vuex, undo-redo-vuex can be used with the following setup:

Named or basic store module

The scaffoldStore helper function will bootstrap a vuex store to setup the state, actions and mutations to work with the plugin.

import { scaffoldStore } from 'undo-redo-vuex';

const state = {
  // Define vuex state properties as normal
};
const actions = {
  // Define vuex actions as normal
};
const mutations = {
  // Define vuex mutations as normal
}

export default scaffoldStore({
  state,
  actions,
  mutations,
  namespaced: true // NB: do not include this is non-namespaced stores
});

Alternatively, the scaffoldState, scaffoldActions, and scaffoldMutations helper functions can be individually required to bootstrap the vuex store. This will expose canUndo and canRedo as vuex state properties which can be used to enable/disable UI controls (e.g. undo/redo buttons).

import {
  scaffoldState,
  scaffoldActions,
  scaffoldMutations,
} from 'undo-redo-vuex';

const state = {
  // Define vuex state properties as normal
};
const actions = {
  // Define vuex actions as normal
};
const mutations = {
  // Define vuex mutations as normal
}

export default {
  // Use the respective helper function to scaffold state, actions and mutations
  state: scaffoldState(state),
  actions: scaffoldActions(actions),
  mutations: scaffoldMutations(mutations),
  namespaced: true // NB: do not include this is non-namespaced stores
}

store/index.js

• Namespaced modules

import Vuex from 'vuex';
import undoRedo from 'undo-redo-vuex';

// NB: The following config is used for namespaced store modules.
// Please see below for configuring a non-namespaced (basic) vuex store
export default new Vuex.Store({
  plugins: [
    undoRedo({
      // The config object for each store module is defined in the 'paths' array
      paths: [
        {
          namespace: 'list',
          // Any mutations that you want the undo/redo mechanism to ignore
          ignoreMutations: ['addShadow', 'removeShadow'],
        },
      ],
    }),
  ],
  /*
  * For non-namespaced stores:
  * state,
  * actions,
  * mutations,
  */
  // Modules for namespaced stores:
  modules: {
    list,
  }
});

• Non-namespaced (basic) vuex store

import Vuex from 'vuex';
import undoRedo from 'undo-redo-vuex';

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  plugins: [
    undoRedo({
      // NB: Include 'ignoreMutations' at root level, and do not provide the list of 'paths'.
      ignoreMutations: ['addShadow', 'removeShadow'],
    }),
  ],
});

Accessing canUndo and canRedo properties

• Vue SFC (.vue)

import { mapState } from 'vuex';

const MyComponent = {
  computed: {
    ...mapState({
      undoButtonEnabled: 'canUndo',
      redoButtonEnabled: 'canRedo',
    }),
  }
}

Testing and test scenarios

Development tests are run using the Ava test runner. The ./test/store directory contains a basic Vuex store with a namespaced list module.

The tests in ./test/test.js are executed serially to track the change in store state over time.

yarn test

API documentation and reference

Functions

store/plugins/undoRedo(options) ⇒ function

The Undo-Redo plugin module

Returns: function - plugin - the plugin function which accepts the store parameter

store/plugins/undoRedo:pipeActions(actions)

Piping async action calls sequentially using Array.prototype.reduce to chain and initial, empty promise

store/plugins/undoRedo:getConfig(namespace) ⇒ Object

Piping async action calls sequentially using Array.prototype.reduce to chain and initial, empty promise

Returns: Object - config - The object containing the undo/redo stacks of the store module

store/plugins/undoRedo:setConfig(namespace, config)

Piping async action calls sequentially using Array.prototype.reduce to chain and initial, empty promise

store/plugins/undoRedo:redo()

The Redo function - commits the latest undone mutation to the store, and pushes it to the done stack

store/plugins/undoRedo:undo()

The Undo function - pushes the latest done mutation to the top of the undone stack by popping the done stack and 'replays' all mutations in the done stack