Undo/redo For Vuex Store - vuex-history

Install & Download:

# NPM
$ npm i vuex-history

Description:

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: