Vuex Stateshot
💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.
Installation
npm i vuex-stateshot -Soryarn 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:
const store = state: {} ... plugins:
Work with component
In component, use createNamespacedHelper
to map the helpers:
const mapGetters mapActions = ... computed: ... methods: ...
Or use the module namespace (vuexstateshot
) as the first argument to map helpers
... computed: ... methods: ...
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:
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
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