<commit_before># vuex-persist

A Typescript-ready [Vuex](https://vuex.vuejs.org/) plugin that enables
you to save the state of your app to a persisted storage like
Cookies or localStorage.

[![Paypal Donate](https://img.shields.io/badge/Donate-Paypal-2244dd.svg)](https://paypal.me/championswimmer)

**Info :**
[![GitHub stars](https://img.shields.io/github/stars/championswimmer/vuex-persist.svg?style=social&label=%20vuex-persist)](http://github.com/championswimmer/vuex-persist)
[![npm](https://img.shields.io/npm/v/vuex-persist.svg?colorB=dd1100)](http://npmjs.com/vuex-persist)
[![npm](https://img.shields.io/npm/dw/vuex-persist.svg?colorB=fc4f4f)](http://npmjs.com/vuex-persist)
[![license](https://img.shields.io/github/license/championswimmer/vuex-persist.svg)]()

**Status :**
[![Build Status](https://travis-ci.org/championswimmer/vuex-persist.svg?branch=master)](https://travis-ci.org/championswimmer/vuex-persist)
[![codebeat badge](https://codebeat.co/badges/dc97dea1-1e70-45d5-b3f1-fec2a6c3e4b0)](https://codebeat.co/projects/github-com-championswimmer-vuex-persist-master)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/0fdc0921591d4ab98b0c0c173ef22649)](https://www.codacy.com/app/championswimmer/vuex-persist?utm_source=github.com&utm_medium=referral&utm_content=championswimmer/vuex-persist&utm_campaign=Badge_Grade)
[![Code Climate](https://codeclimate.com/github/championswimmer/vuex-persist/badges/gpa.svg)](https://codeclimate.com/github/championswimmer/vuex-persist)
[![codecov](https://codecov.io/gh/championswimmer/vuex-persist/branch/master/graph/badge.svg)](https://codecov.io/gh/championswimmer/vuex-persist)

**Sizes :**
[![npm:size:gzip](https://img.shields.io/bundlephobia/minzip/vuex-persist.svg?label=npm:size:gzip)](https://bundlephobia.com/result?p=vuex-persist)
[![umd:min:gzip](https://img.badgesize.io/https://unpkg.com/vuex-persist?compression=gzip&label=umd:min:gzip)](https://unpkg.com/vuex-persist)
[![umd:min:brotli](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/vuex-persist?compression=brotli&label=umd:min:brotli)](https://cdn.jsdelivr.net/npm/vuex-persist)

#### Table of Contents

- [vuex-persist](#vuex-persist)
      - [Table of Contents](#table-of-contents)
  - [Features](#features)
  - [Compatibility](#compatibility)
  - [Installation](#installation)
    - [Vue CLI Build Setup (using Webpack or some bundler)](#vue-cli-build-setup-using-webpack-or-some-bundler)
    - [Transpile for `target: es5`](#transpile-for-target-es5)
    - [Directly in Browser](#directly-in-browser)
    - [Tips for NUXT](#tips-for-nuxt)
  - [Usage](#usage)
    - [Steps](#steps)
    - [Constructor Parameters -](#constructor-parameters--)
    - [Usage Notes](#usage-notes)
      - [Reducer](#reducer)
      - [Circular States](#circular-states)
  - [Examples](#examples)
    - [Simple](#simple)
    - [Detailed](#detailed)
    - [Support Strict Mode](#support-strict-mode)
    - [Note on LocalForage and async stores](#note-on-localforage-and-async-stores)
  - [Unit Testing](#unit-testing)
    - [Jest](#jest)

<small><i><a href='http://ecotrust-canada.github.io/markdown-toc/'>Table of contents generated with markdown-toc</a></i></small>

## Features

- 📦 NEW in v1.5
  - distributed as esm and cjs both (via module field of package.json)
  - better tree shaking as a result of esm
- 🎗 NEW IN V1.0.0
  - Support localForage and other Promise based stores
  - Fix late restore of state for localStorage
- Automatically save store on mutation.
- Choose which mutations trigger store save, and which don't, using `filter` function
- Works perfectly with modules in store
- Ability to save partial store, using a `reducer` function
- Automatically restores store when app loads
- You can create mulitple VuexPersistence instances if you want to -
  - Save some parts of the store to localStorage, some to sessionStorage
  - Trigger saving to localStorage on data download, saving to cookies on authentication result

## Compatibility

- [VueJS](http://vuejs.org) - v2.0 and above
- [Vuex](http://vuex.vuejs.org) - v2.1 and above

## Installation

### Vue CLI Build Setup (using Webpack or some bundler)

```shell
npm install --save vuex-persist
```

or

```shell
yarn add vuex-persist
```

### Transpile for `target: es5`
This module is distributed in 3 formats

 - umd build `/dist/umd/index.js` in **es5** format
 - commonjs build `/dist/cjs/index.js` in **es2015** format
 - esm build `/dist/esm/index.js` in **es2015** format

When using with Webpack (or Vue CLI 3), the esm file gets used by default.
If your project has a `es6` or `es2015` target, you're good, but if
for backwards compatibility, you are compiling your project to `es5` then
this module also needs to be transpiled.

To enable transpilation of this module

```js
// in your vue.config.js
module.exports = {
  /* ... other config ... */
  transpileDependencies: ['vuex-persist']
}
```

### Directly in Browser

```html
<!-- We need lodash.merge so get lodash first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex-persist"></script>
```

### Tips for NUXT

This is a plugin that works [only on the client side](https://nuxtjs.org/guide/plugins/#client-side-only).
So we'll register it as a ssr-free plugin.

```js
// Inside - nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: false }
  ]
}
```

```js
// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
    /* your options */
    }).plugin(store);
  });
}
```

## Usage

### Steps

Import it

```js
import VuexPersistence from 'vuex-persist'
```

> NOTE: In browsers, you can directly use `window.VuexPersistence`

Create an object

```js
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})
```

Use it as Vue plugin. (in typescript)

```typescript
const store = new Vuex.Store<State>({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})
```

(or in Javascript)

```js
const store = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}
```

### Constructor Parameters -
<commit_msg>update readme to add RootState in constructor for TS<commit_after># vuex-persist

A Typescript-ready [Vuex](https://vuex.vuejs.org/) plugin that enables
you to save the state of your app to a persisted storage like
Cookies or localStorage.

[![Paypal Donate](https://img.shields.io/badge/Donate-Paypal-2244dd.svg)](https://paypal.me/championswimmer)

**Info :**
[![GitHub stars](https://img.shields.io/github/stars/championswimmer/vuex-persist.svg?style=social&label=%20vuex-persist)](http://github.com/championswimmer/vuex-persist)
[![npm](https://img.shields.io/npm/v/vuex-persist.svg?colorB=dd1100)](http://npmjs.com/vuex-persist)
[![npm](https://img.shields.io/npm/dw/vuex-persist.svg?colorB=fc4f4f)](http://npmjs.com/vuex-persist)
[![license](https://img.shields.io/github/license/championswimmer/vuex-persist.svg)]()

**Status :**
[![Build Status](https://travis-ci.org/championswimmer/vuex-persist.svg?branch=master)](https://travis-ci.org/championswimmer/vuex-persist)
[![codebeat badge](https://codebeat.co/badges/dc97dea1-1e70-45d5-b3f1-fec2a6c3e4b0)](https://codebeat.co/projects/github-com-championswimmer-vuex-persist-master)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/0fdc0921591d4ab98b0c0c173ef22649)](https://www.codacy.com/app/championswimmer/vuex-persist?utm_source=github.com&utm_medium=referral&utm_content=championswimmer/vuex-persist&utm_campaign=Badge_Grade)
[![Code Climate](https://codeclimate.com/github/championswimmer/vuex-persist/badges/gpa.svg)](https://codeclimate.com/github/championswimmer/vuex-persist)
[![codecov](https://codecov.io/gh/championswimmer/vuex-persist/branch/master/graph/badge.svg)](https://codecov.io/gh/championswimmer/vuex-persist)

**Sizes :**
[![npm:size:gzip](https://img.shields.io/bundlephobia/minzip/vuex-persist.svg?label=npm:size:gzip)](https://bundlephobia.com/result?p=vuex-persist)
[![umd:min:gzip](https://img.badgesize.io/https://unpkg.com/vuex-persist?compression=gzip&label=umd:min:gzip)](https://unpkg.com/vuex-persist)
[![umd:min:brotli](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/vuex-persist?compression=brotli&label=umd:min:brotli)](https://cdn.jsdelivr.net/npm/vuex-persist)

#### Table of Contents

- [vuex-persist](#vuex-persist)
      - [Table of Contents](#table-of-contents)
  - [Features](#features)
  - [Compatibility](#compatibility)
  - [Installation](#installation)
    - [Vue CLI Build Setup (using Webpack or some bundler)](#vue-cli-build-setup-using-webpack-or-some-bundler)
    - [Transpile for `target: es5`](#transpile-for-target-es5)
    - [Directly in Browser](#directly-in-browser)
    - [Tips for NUXT](#tips-for-nuxt)
  - [Usage](#usage)
    - [Steps](#steps)
    - [Constructor Parameters -](#constructor-parameters--)
    - [Usage Notes](#usage-notes)
      - [Reducer](#reducer)
      - [Circular States](#circular-states)
  - [Examples](#examples)
    - [Simple](#simple)
    - [Detailed](#detailed)
    - [Support Strict Mode](#support-strict-mode)
    - [Note on LocalForage and async stores](#note-on-localforage-and-async-stores)
  - [Unit Testing](#unit-testing)
    - [Jest](#jest)

<small><i><a href='http://ecotrust-canada.github.io/markdown-toc/'>Table of contents generated with markdown-toc</a></i></small>

## Features

- 📦 NEW in v1.5
  - distributed as esm and cjs both (via module field of package.json)
  - better tree shaking as a result of esm
- 🎗 NEW IN V1.0.0
  - Support localForage and other Promise based stores
  - Fix late restore of state for localStorage
- Automatically save store on mutation.
- Choose which mutations trigger store save, and which don't, using `filter` function
- Works perfectly with modules in store
- Ability to save partial store, using a `reducer` function
- Automatically restores store when app loads
- You can create mulitple VuexPersistence instances if you want to -
  - Save some parts of the store to localStorage, some to sessionStorage
  - Trigger saving to localStorage on data download, saving to cookies on authentication result

## Compatibility

- [VueJS](http://vuejs.org) - v2.0 and above
- [Vuex](http://vuex.vuejs.org) - v2.1 and above

## Installation

### Vue CLI Build Setup (using Webpack or some bundler)

```shell
npm install --save vuex-persist
```

or

```shell
yarn add vuex-persist
```

### Transpile for `target: es5`
This module is distributed in 3 formats

 - umd build `/dist/umd/index.js` in **es5** format
 - commonjs build `/dist/cjs/index.js` in **es2015** format
 - esm build `/dist/esm/index.js` in **es2015** format

When using with Webpack (or Vue CLI 3), the esm file gets used by default.
If your project has a `es6` or `es2015` target, you're good, but if
for backwards compatibility, you are compiling your project to `es5` then
this module also needs to be transpiled.

To enable transpilation of this module

```js
// in your vue.config.js
module.exports = {
  /* ... other config ... */
  transpileDependencies: ['vuex-persist']
}
```

### Directly in Browser

```html
<!-- We need lodash.merge so get lodash first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex-persist"></script>
```

### Tips for NUXT

This is a plugin that works [only on the client side](https://nuxtjs.org/guide/plugins/#client-side-only).
So we'll register it as a ssr-free plugin.

```js
// Inside - nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: false }
  ]
}
```

```js
// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
    /* your options */
    }).plugin(store);
  });
}
```

## Usage

### Steps

Import it

```js
import VuexPersistence from 'vuex-persist'
```

> NOTE: In browsers, you can directly use `window.VuexPersistence`

Create an object

```ts
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

// or in Typescript

const vuexLocal = new VuexPersistence<RootState>({
  storage: window.localStorage
})

```

Use it as Vue plugin. (in typescript)

```typescript
const store = new Vuex.Store<State>({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})
```

(or in Javascript)

```js
const store = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}
```

### Constructor Parameters -

{'fraction_non_alphanumeric': 0.16696729668261312, 'fraction_numerical': 0.013018586777507647, 'mean_word_length': 4.271599834642414, 'pattern_counts': {'":': 0, '<': 28, '<?xml version=': 0, '>': 34, 'https://': 56, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1904567', 'n_tokens_mistral': 4859, 'n_tokens_neox': 4535, 'n_words': 935}