https://github.com/xiaoluoboding/vuex-stateshot
💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.
https://github.com/xiaoluoboding/vuex-stateshot
history-management snapshot state-management undo-redo vue vuex-plugin vuex3
Last synced: 2 months ago
JSON representation
💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.
- Host: GitHub
- URL: https://github.com/xiaoluoboding/vuex-stateshot
- Owner: xiaoluoboding
- License: mit
- Created: 2019-12-12T09:04:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-28T10:04:35.000Z (over 4 years ago)
- Last Synced: 2024-05-02T05:52:24.797Z (about 1 year ago)
- Topics: history-management, snapshot, state-management, undo-redo, vue, vuex-plugin, vuex3
- Language: JavaScript
- Homepage: https://xiaoluoboding.github.io/vuex-stateshot/
- Size: 429 KB
- Stars: 13
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vuex Stateshot
💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.
## Installation
```bash
npm i vuex-stateshot -S
or
yarn add vuex-stateshot -S
```
## Demo
See `/app` works at [Code Sandbox](https://codesandbox.io/s/vuex-stateshot-szx9h)
## Concepts
> The core concepts is base on StateShot.js and Vuex3.1+ API `subscribe` & `subscribeAction`
## Usage
> The Vuex Stateshot is base on [StateShot](https://github.com/gaoding-inc/stateshot), you can know about `StateShot` first, maybe you already use in your project.
### Create the plugin
Add the plugin to the Vuex **store**:
```javascript
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:
```javascript
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
```javascript
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](https://github.com/gaoding-inc/stateshot#history) instance. | Object |
**The is a example**
```js
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
```javascript
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