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

| Name | Description | Type | |:--------|:--------|:--------:| | first argument | Provide the relation statement of module namespace and the actions/mutations you want snapshot | Object | | second argument | The options of stateshot history instance. | Object |

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

| Name | Description | Type | |:--------|:--------|:--------:| | maxLength | Max length saving history states, 100 by default. | Number | | delay | Debounce time for push in milliseconds, 50 by default. | Number |

Plugin Methods

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

this.$stateshot.syncState()

| Name | Description | Callback | |:--------|:--------|:--------:| | syncState | Custom to record the state, not by subscribe the action/mutation | - | | getHistoryLength | Get the current state history length | - | | unsubscribeAction | When you want stop subscribe Action programly | - | | subscribeAction | Used when you want resubscribe Action after call unsubscribeAction | - | | unsubscribe | When you want stop subscribe Mutations programly | - | | subscribe | Used when you want resubscribe Mutations after call unsubscribe | - |

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

| Name | Description | Type | |:--------|:--------|:--------:| | undoCount | The counts of the current state has undo. | Number | | redoCount | The counts of the current state has redo. | Number | | hasUndo | Whether current state has undo records before. | Boolean | | hasRedo | Whether current state has redo records after undo. | Boolean |

mapActions

| Name | Description | Callback | |:--------|:--------|:--------:| | undo | Undo a record if possible. | () => prevState | | redo | Redo a record if possible. Must after call the undo action | () => nextState | | reset | Clear all the state to the origin | - |

License

MIT