# vuex-storage-share

> Vuex storage share plugin.

Latest version **0.1.2** (published 2021-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-storage-share
pnpm add vuex-storage-share
yarn add vuex-storage-share
bun add vuex-storage-share
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2021-06-24 |
| First published | 2021-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | LinQuan |
| Maintainers | mlinquan |
| Keywords | vuex, storage, share, tab, localStorage |

## Links

- npm: https://www.npmjs.com/package/vuex-storage-share
- Repository: https://github.com/mlinquan/vuex-storage-share
- Homepage: https://github.com/mlinquan/vuex-storage-share#readme
- Issues: https://github.com/mlinquan/vuex-storage-share/issues
- npm.io page: https://npm.io/package/vuex-storage-share

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2021-06-24
- 0.1.1 — 2021-06-23
- 0.1.0 — 2021-06-23

## README

# vuex-storage-share
[![npm version](https://badge.fury.io/js/vuex-storage-share.svg)](https://badge.fury.io/js/vuex-storage-share)
[![Gzip Size](http://img.badgesize.io/https://unpkg.com/vuex-storage-share@latest/dist/vuex-storage-share.umd.min.js?compression=gzip&style=flat-square)](https://unpkg.com/vuex-storage-share)
[![Monthly Downloads](https://img.shields.io/npm/dm/vuex-storage-share.svg)](https://www.npmjs.com/package/vuex-storage-share)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Installation

Install

```sh
$ npm install vuex-storage-share --save
# or
$ yarn add vuex-storage-share
```

## Usage

```js

import VuexStorageShare from 'vuex-storage-share'

const storagePlugin = VuexStorageShare({
  storagePrefix: 'VUEX_STORAGE/',
  predicate: ['SET_USER_INFO', 'SET_TOKEN', 'SET_USER_AVATAR'],
  expires_in: 3600, // One hour, it has not yet been realized
  storageListener({ type, payload }) {
    const route = router.app._route
    if (type === 'SET_USER_INFO') {
      if (!(payload && payload.is_login) && route.path !== '/login') {
        router.replace({
          path: '/login',
          query: {
            redirect: route.fullPath
          }
        })
      }
      if ((payload && payload.is_login) && route.path === '/login') {
        router.replace(route.query && route.query.redirect || '/home')
      }
    }
  }
})

const store = new Vuex.Store({
  state: {
    userinfo: {
      is_login: false
    }
  },
  mutations: {
    SET_USER_INFO(state, userinfo) {
      userinfo.is_login = !!userinfo.id
      state.userinfo = userinfo
    }
  },
  modules: {
    app,
    user,
  },
  getters,
  plugins: [
    storagePlugin.subscriber
  ]
})
```

## Options

| Option | Explain | Type | Default | 
| ------ | ------ | ------ | ------ |
| storagePrefix | localStorage key prefix. It is also a unique identification. | `String` | `VUEX_STORAGE/` |
| expires_in | Expiration time in seconds. | `Number` | `0` |
| predicate | List of mutations to store and share. | `Array` | `[]` |
| storageListener | `storageListener({ type, payload }) {}` Whenever the store is persisted, return a mutation object. | `Function` | `-` |

### MIT License

### Copyright © 2021 LinQuan.

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