npmpackage.info

Gathering detailed insights and metrics for pinia-persistence-plugin

Other packages similar to pinia-persistence-plugin

pinia-plugin-persistedstate

4.2.0

Configurable persistence and rehydration of Pinia stores.

pinia-plugin-unistorage

0.1.2

uniapp 下 pinia 的本地数据缓存插件

pinia-plugin-persistence

0.0.2

Configurable persistence and rehydration of Pinia stores.

pinia-persistence

1.0.0

A pinia plugin for state persistence

pinia-persistence-plugin

Handle Pinia state persistence easily and support async storages like localForage.

0.0.5

MIT

TypeScript

1.29 kB

3,006

Installations

npm install pinia-persistence-plugin

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

16.14.0

NPM Version

8.3.1 Score

51.4

Supply Chain

97.1

Quality

75.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

v0.0.5

Published on 28 Mar 2023

v0.0.4

Published on 25 Mar 2023

v0.0.3

Published on 24 Mar 2023

v0.0.2

Published on 22 Mar 2023

v0.0.1

Published on 21 Mar 2023

View all 5 releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

TypeScript

JavaScript

HTML

Vue

Shell

TypeScript (86.01%)

JavaScript (8.71%)

HTML (2.23%)

Vue (1.82%)

Shell (1.23%)

Developer

noeGnh

Download Statistics

Total Downloads

3,006

Last Day

Last Week

Last Month

145

Last Year

2,076

GitHub Statistics

18 Commits

1 Watching

2 Branches

1 Contributors

Bundle Size

3.10 kB

Minified

1.29 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.0.5

Package Id

pinia-persistence-plugin@0.0.5

Unpacked Size

19.46 kB

Size

5.83 kB

File Count

NPM Version

8.3.1

Node Version

16.14.0

Publised On

28 Mar 2023

Total Downloads

Cumulative downloads

Total Downloads

3,006

Last day

Compared to previous day

Last week

24.1%

Compared to previous week

Last month

13.3%

145

Compared to previous month

Last year

123.2%

2,076

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

pinia

Dev Dependencies

auto-changelog vite vitest

Versions

pinia-persistence-plugin

Handle Pinia state persistence easily.

Features

Support multiple storages.
Can be configured globally and in every Pinia store.
Support async storages like localForage.
Storages, store paths and serialization method can be customized.

Installation

Install with your favorite package manager:

1# npm
2npm i pinia-persistence-plugin
3# yarn
4yarn add pinia-persistence-plugin
5# pnpm
6pnpm add pinia-persistence-plugin

Usage

Add this plugin to your Pinia instance:

1import { createPinia } from 'pinia'
2import { persistencePlugin } from 'pinia-persistence-plugin'
3
4const pinia = createPinia()
5pinia.use(persistencePlugin())

The persistence is enabled by default for all pinia stores and the default storage is localStorage.

Configuration

Plugin Options

1persistencePlugin({
2 // plugin options goes here
3 storeKeysPrefix: 'test',
4 persistenceDefault: false,
5 storageItemsDefault: [
6  {
7   storage: sessionStorage,
8  },
9 ],
10 debug: true,
11})

storeKeysPrefix?: string: Defaults to undefined. Add prefix to stores keys.
persistenceDefault?: boolean: Defaults to true. Whether to persist all stores by default.
storageItemsDefault?: PluginStorageItem[]: Defaults to localStorage. List of storages.
assertStorage?: (storage: Storage) => void | Promise<void>: Perform a write and delete operation by default. To ensure storages is available.
ensureAsyncStorageUpdateOrder?: boolean: Ensure that the update of asynchronous storages is done in order
debug?: boolean: Defaults to false. Display errors and warnings in console.

PluginStorageItem

storage?: Storage: Where to store persisted state
includePaths?: string[]: Defaults to []. An array of any paths to partially persist the state
excludePaths?: string[]: Defaults to []. An array of any paths to exclude
serializer?: Serializer: Object containing serialize and deserialize methods
- serialize?: (state: S): any: Defaults to JSON.stringify. This method will be called right before storage.setItem.
- deserialize?: (value: any): any: Defaults to JSON.parse. This method will be called right after storage.getItem.

Store Options

1defineStore(
2 'store',
3 () => {
4  const count = ref(0)
5  const increment = () => count.value++
6  return {
7   count,
8   increment,
9  }
10 },
11 {
12  persistence: {
13   // store options goes here
14   enabled: true,
15   storageItems: [
16    {
17     key: 'sample',
18     storage: sessionStorage,
19     includePaths: ['count'],
20    },
21   ],
22  },
23 }
24)

enabled?: boolean: Enable persistence for the store
storageItems?: StorageItem[]: List of storages.
beforeHydrate?: (oldState: S) => void: Perform some tasks before patching the store

StorageItem

key?: string: Defaults to store.$id. The persisted store state key. And the same properties as PluginStorageItem

Storage

getItem: (key: string) => any | Promise<any>
setItem: (key: string, value: any) => void | Promise<void>
removeItem: (key: string) => void | Promise<void>

Some examples of use

js-cookie

1import { defineStore } from 'pinia'
2
3import Cookies from 'js-cookie'
4
5defineStore('example', {
6 // ...
7 persistence: {
8  enabled: true,
9  storageItems: [
10   {
11    storage: {
12     getItem: (key: string) => {
13      return Cookies.get(key)
14     },
15     setItem: (key: string, value: any) => {
16      Cookies.set(key, value)
17     },
18     removeItem: (key: string) => {
19      Cookies.remove(key)
20     },
21    },
22   },
23  ],
24 },
25})

localForage

1import { defineStore } from 'pinia'
2
3import localforage from 'localforage'
4
5localforage.config({
6 driver: [localforage.INDEXEDDB],
7 name: 'Test IndexedDB',
8 storeName: 'store',
9})
10
11defineStore('example', {
12 // ...
13 persistence: {
14  enabled: true,
15  storageItems: [
16   {
17    storage: {
18     getItem: async (key: string) => {
19      return await localforage.getItem(key)
20     },
21     setItem: async (key: string, value: any) => {
22      await localforage.setItem(key, value)
23     },
24     removeItem: async (key: string) => {
25      await localforage.removeItem(key)
26     },
27    },
28   },
29  ],
30 },
31})

Custom serialize method

1import { defineStore } from 'pinia'
2
3import stringify from 'json-stringify-safe'
4
5defineStore('example', {
6 // ...
7 persistence: {
8  enabled: true,
9  storageItems: [
10   {
11    storage: localStorage,
12    serializer: {
13     serialize: (value: any) => stringify(value),
14    },
15   },
16  ],
17 },
18})

localStorage with SecureLS encryption

1import { defineStore } from 'pinia'
2
3import SecureLS from 'secure-ls'
4
5var ls = new SecureLS({
6 encodingType: 'aes',
7 isCompression: false,
8})
9
10defineStore('example', {
11 // ...
12 persistence: {
13  enabled: true,
14  storageItems: [
15   {
16    key: 'encrypted_data',
17    storage: {
18     getItem: (key: string) => {
19      try {
20       return ls.get(key)
21      } catch (error) {
22       console.error(error)
23      }
24     },
25     setItem: (key: string, value: any) => {
26      try {
27       ls.set(key, value)
28      } catch (error) {
29       console.error(error)
30      }
31     },
32     removeItem: (key: string) => {
33      try {
34       ls.remove(key)
35      } catch (error) {
36       console.error(error)
37      }
38     },
39    },
40   },
41  ],
42 },
43})

You can see an example of a full implementation here here

This project is inspired by vuex-persistedstate and pinia-plugin-persist.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Changelog

Detailed changes for each release are documented in the release notes.

License

This project is under MIT license.

No vulnerabilities found.

No security vulnerabilities found.