# vuex-persisted-preprocess-state

> Persist Vuex state with sync/async storages and preprocess.

Latest version **2.2.0** (published 2018-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-persisted-preprocess-state
pnpm add vuex-persisted-preprocess-state
yarn add vuex-persisted-preprocess-state
bun add vuex-persisted-preprocess-state
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2018-04-04 |
| First published | 2018-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jake Oswaldo |
| Maintainers | jake-oswaldo |
| Keywords | vue, vuex, plugin |

## Links

- npm: https://www.npmjs.com/package/vuex-persisted-preprocess-state
- Repository: https://github.com/jakkyo/vuex-persistedstate
- Homepage: https://github.com/jakkyo/vuex-persistedstate#readme
- Issues: https://github.com/jakkyo/vuex-persistedstate/issues
- npm.io page: https://npm.io/package/vuex-persisted-preprocess-state

## Dependencies (5)

- [shvl](https://npm.io/package/shvl.md) ^1.1.1
- [deepmerge](https://npm.io/package/deepmerge.md) ^2.0.1
- [random-uuid-v4](https://npm.io/package/random-uuid-v4.md) 0.0.6
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1
- [can-use-storage-check](https://npm.io/package/can-use-storage-check.md) ^1.0.3

## Recent versions

- 2.2.0 (latest) — 2018-04-04
- 2.1.0 — 2018-04-04
- 2.0.0 — 2018-03-25
- 1.0.8 — 2018-01-19
- 1.0.7 — 2018-01-19
- 1.0.6 — 2018-01-18
- 1.0.5 — 2018-01-16
- 1.0.4 — 2018-01-16
- 1.0.3 — 2018-01-16
- 1.0.0 — 2018-01-16

## README

# vuex-persisted-preprocess-state

## Requirements

- [Vue.js](https://vuejs.org) (v2.0.0+)
- [Vuex](http://vuex.vuejs.org) (v2.0.0+)

## Installing
```
npm i -S vuex-persisted-preprocess-state
```

## Usage

```js
import createPersistedState from 'vuex-persisted-preprocess-state'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})
```

## API

### `createPersistedState([options])`

Creates a new instance of the plugin with the given options. The following options can be provided to configure the plugin for your specific needs:

- `key <String>`: The key to store the persisted state under. (default: __vuex__)
- `paths <Array>`: An array of any paths to partially persist the state. If no paths are given, the complete state is persisted. (default: __[]__)
- `storage <Object>`: Defaults to sessionStorage.
- `initialSet <Boolean>`: Initial storage set. (default: true)
- `throttleTime <Number>`: Minimum time in ms between storage updates. (default: 0)
- `throttleOptions <Object>`: The throttle options object. (default: {}, defaultOptions: { leading: true, trailing: true })
- `afterLoad <value | Promise(value) <- Function>`: A function that will be called to process storage value before parsing it from json and rehydrating state. Defaults to returning same value.
- `beforeSave <value | Promise(value) <- Function>`: A function that will be called to process vuex state before stringifing it to json and saving to storage. Defaults to returning same value.

## Customize Storage

If it's not ideal to have the state of the Vuex store inside sessionstorage. One can easily implement the functionality to use [cookies](https://github.com/js-cookie/js-cookie) for that (or any other you can think of);

```js
import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})
```

In fact, any object following the Storage protocol (getItem, setItem, removeItem, etc) could be passed:

```js
createPersistedState({ storage: window.sessionStorage })
```

This is especially useful when you are using this plugin in combination with server-side rendering, where one could pass an instance of [dom-storage](https://www.npmjs.com/package/dom-storage).

## License

MIT © Jake Oswaldo

---
_Source: https://npm.io/package/vuex-persisted-preprocess-state · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._