vuex-stateshot

Vuex Stateshot

💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.

Installation

npm i vuex-stateshot -S
or
yarn add vuex-stateshot -S

Demo

See /app works at Code Sandbox

Concepts

The core concepts is base on StateShot.js and Vuex3.1+ API subscribe & subscribeAction

Usage

The Vuex Stateshot is base on StateShot, you can know about StateShot first, maybe you already use in your project.

Create the plugin

Add the plugin to the Vuex store:

import { createPlugin } from 'vuex-stateshot'

const store = new Vuex.Store({
  state: {},
  ...,
  plugins: [
    createPlugin({
      // The special root module key
      rootModule: {
        // The actions you want snapshot
        actions: [],
        // The mutations you want snapshot
        mutations: []
      },
      // The custom module name
      __MODULE__NAME__: {
        // The actions you want snapshot
        actions: [],
        // The mutations you want snapshot
        mutations: []
      }
    })
  ]
})

Work with component

In component, use createNamespacedHelper to map the helpers:

import { createNamespacedHelpers } from 'vuex'

const { mapGetters, mapActions } = createNamespacedHelpers('vuexstateshot')

export default {
  ...,

  computed: {
    ...mapGetters([ 'undoCount', 'redoCount', 'hasUndo', 'hasRedo' ])
  },

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

Or use the module namespace (vuexstateshot) as the first argument to map helpers

import { mapGetters, mapActions } from 'vuex'

export default {
  ...,

  computed: {
    ...mapGetters('vuexstateshot', [ 'undoCount', 'redoCount', 'hasUndo', 'hasRedo' ])
  },

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

API

Plugin Options

The is a example

plugins: [
  createPlugin(
    // first argument
    {
      // The special root module key
      rootModule: {
        // The actions you want snapshot
        actions: ['setTheme']
      },
      // The custom module name
      global: {
        // The actions you want snapshot
        actions: ['syncState', 'setLayout'],
        // The mutations you want snapshot
        mutations: ['CHANGE_COLOR']
      },
      // The nested custom module name
      'global/widget': {
        actions: ['toggleShowCard']
      }
    },
    // second argument optionally
    {
      maxLength: 20
    }
  )
]

history Options

Plugin Methods

Vuex Stateshot also provide a custom method to record the state into history

this.$stateshot.syncState()

Namespaced Helpers

mapGetters

When plugin first time sync the base state, the undoCount = 1, and hasUndo = true; It's all begin; When you call the undo method, you have the state can redo

mapActions

License

MIT