A Vuex plugin to take state snapshot on mutation.

yarn add vuex-state-snapshot

See examples/ at Code Sandbox

Add the plugin to the Vuex store:

import { createPlugin } from 'vuex-state-snapshot'
const store = new Vuex.Store({
  modules: {
    yourModuleNamespace: {
        namespaced: true,
        ...
    }
  },
  plugins: [createPlugin({
    yourModuleNamespace: { /* see Module Options below */ }
  })]
})

In component, use createSnapshotHelpers to map the helpers:

import { createSnapshotHelpers } from 'vuex-state-snapshot'
const snapshot = createSnapshotHelpers('yourModuleNamespace')

export default {
  name: 'App',

  computed: {
    ...snapshot.mapGetters(['undoable', 'redoable', 'undoCount', 'redoCount'])
  },

  methods: {
    ...snapshot.mapActions(['undo', 'redo'])
  }
}

Use can use the UMD build in dist/ (which requires lodash.cloneDeep):

<script src="https://unpkg.com/[email protected]/dist/vuex.min.js"></script>
<script src="https://unpkg.com/[email protected]/distrib/lodash-core.min.js"></script>
<script src="vuex-state-snapshot.umd.min.js"></script>

And use createPlugin and createSnapshotHelpers from the VuexStateSnapshot global.

Options are callbacks with the namespaced state as argument, so you could delegate it back to your state.

Callback to decide to include the state during undo/redo, eg: ID, untracked UI state:

(state, key) => !state.irreversibleStates.includes(key)

Callback to decide to track the mutation, eg: mutation to toggle UI element visibility. mutation.type is un-namespaced:

(state, mutation) => state.trackedMutations.includes(mutation.type)

• undoable
• redoable
• undoCount
• redoCount

• undo
• redo
• clearUndo - Clear undo history
• clearRedo - Clear redo history
• clearSnapshots - Clear both undo and redo histories

Vuex State Snapshot is released under the MIT License.