8

Github GitHub - xiaoluoboding/vuex-stateshot: 💾 A State Snapshot plugin on Actio...

 2 years ago
source link: https://github.com/xiaoluoboding/vuex-stateshot
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vuex Stateshot

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

Installation

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

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'])
  }
}

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK