https://github.com/dezull/vuex-state-snapshot

A Vuex plugin to take state snapshot on mutation
https://github.com/dezull/vuex-state-snapshot

component vue vuex

Last synced: about 1 month ago
JSON representation

A Vuex plugin to take state snapshot on mutation

• Host: GitHub
• URL: https://github.com/dezull/vuex-state-snapshot
• Owner: dezull
• License: mit
• Created: 2019-11-17T07:32:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T13:43:14.000Z (over 1 year ago)
• Last Synced: 2024-01-25T06:20:29.450Z (4 months ago)
• Topics: component, vue, vuex
• Language: JavaScript
• Homepage:
• Size: 994 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)
• awesome-vue - vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation. (Components & Libraries / Utilities)

README

        
# Vuex State Snapshot

A Vuex plugin to take state snapshot on mutation.

## Installation

```shell

yarn add vuex-state-snapshot

```

## Example

See `examples/` at [Code Sandbox](https://codesandbox.io/s/vuex-state-snapshot-example-cd1f4)

## Usage

Add the plugin to the Vuex *store*:

```javascript

import { createPlugin } from 'vuex-state-snapshot'

const store = new Vuex.Store({

  modules: {

    yourModuleNamespace: {

        namespaced: true,

        ...

    }

  },

  plugins: [createPlugin({

    yourModuleNamespace: { /* see Module Options below */ }

  })]

})

```

In *component*, use `createSnapshotHelpers` to map the helpers:

```javascript

import { createSnapshotHelpers } from 'vuex-state-snapshot'

const snapshot = createSnapshotHelpers('yourModuleNamespace')

export default {

  name: 'App',

  computed: {

    ...snapshot.mapGetters(['undoable', 'redoable', 'undoCount', 'redoCount'])

  },

  methods: {

    ...snapshot.mapActions(['undo', 'redo'])

  }

}

```

### Browser/Without Build Tool

Use can use the UMD build in `dist/ ` (which  requires `lodash.cloneDeep`):

```html

```

And use `createPlugin` and `createSnapshotHelpers` from the `VuexStateSnapshot` global.

### Module Options

Options are callbacks with the namespaced `state` as argument, so you could delegate it back to your state.

#### includeState

Callback to decide to include the state during undo/redo, eg: ID, untracked UI state:

```javascript

(state, key) => !state.irreversibleStates.includes(key)

```

#### shouldSnapshot

Callback to decide to track the mutation, eg: mutation to toggle UI element visibility. `mutation.type` is un-namespaced:

```javascript

(state, mutation) => state.trackedMutations.includes(mutation.type)

```

### Available Getters and Actions

#### Getters

* `undoable`

* `redoable`

* `undoCount`

* `redoCount`

#### Actions

* `undo`

* `redo`

* `clearUndo` - Clear undo history

* `clearRedo` - Clear redo history

* `clearSnapshots` - Clear both undo and redo histories

## License

Vuex State Snapshot is released under the [MIT License](https://opensource.org/licenses/MIT).