Undo/redo For Vuex Store – vuex-history

A Vue friendly library that provides undo/redo functionality for Vuex store.

Features:

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

How to use it:

1. Install and import the vuex-history.

import Vue from 'vue';
import VuexHistory from 'vuex-history';
VuexHistory.install( Vue );
const componentRoot = Vue.createApp();

2. Make your store with Vuex.

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

3. Make a history instance with a specific state, where…

  • store: Vuex store instance.
  • watchStateNames: property names of the state, in an array
  • maxHistoryLength: defaults to 20
const watchStateNames = [ 'propA' ];
const maxHistoryLength = 50;
const vuexHistory = new VuexHistory( store, watchStateNames, maxHistoryLength );

4. Save snapshots, undo and redo in your component.

methods: {
  onValueChangeEnd() {
    vuexHistory.saveSnapshot();
  },
  onPressUndoButton() {
    if ( vuexHistory.canUndo ) vuexHistory.undo();
  },
  onPressRedoButton() {
    if ( vuexHistory.canRedo ) vuexHistory.redo();
  },
},

5. All available API methods:

  • .undo()
  • .redo()
  • .saveSnapshot()
  • .clearHistory()
  • .hasDifferenceFromLatest()

Preview:

Undo redo For Vuex Store vuex-history

Download Details:

Author: yomotsu

Live Demo: https://yomotsu.github.io/vuex-history/examples/basic.html

Download Link: https://github.com/yomotsu/vuex-history/archive/refs/heads/master.zip

Official Website: https://github.com/yomotsu/vuex-history

Install & Download:

# NPM
$ npm i vuex-history

Add Comment