99 lines
3.2 KiB
Markdown
99 lines
3.2 KiB
Markdown
# pinia-plugin-persistedstate
|
|
|
|
[![npm version][version-src]][version-href]
|
|
[![bundle size][bundle-src]][bundle-href]
|
|
[![license][license-src]][license-href]
|
|
|
|
> Configurable persistence and rehydration of Pinia stores.
|
|
|
|
[**_Read the full documentation_**](https://praz.codeberg.page/pinia-plugin-persistedstate)
|
|
|
|
## Features
|
|
|
|
- Persist Pinia stores with a friendly API inspired by [`vuex-persistedstate`](https://github.com/robinvdvleuten/vuex-persistedstate).
|
|
- Highly customizable (storage, serializer, paths picking/omitting).
|
|
- Out of the box SSR-friendly support for [`Nuxt`](#usage-with-nuxt).
|
|
- Very smol (<2kB minzipped).
|
|
|
|
## Quickstart
|
|
|
|
1. Install with your favorite package manager:
|
|
- **pnpm** : `pnpm add pinia-plugin-persistedstate`
|
|
- npm : `npm i pinia-plugin-persistedstate`
|
|
- yarn : `yarn add pinia-plugin-persistedstate`
|
|
|
|
2. Add the plugin to pinia:
|
|
|
|
```ts
|
|
import { createPinia } from 'pinia'
|
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
|
|
|
const pinia = createPinia()
|
|
pinia.use(piniaPluginPersistedstate)
|
|
```
|
|
|
|
3. Add the `persist` option to the store you want to be persisted:
|
|
|
|
```ts
|
|
import { defineStore } from 'pinia'
|
|
|
|
export const useStore = defineStore('store', {
|
|
state: () => ({
|
|
someState: 'hello pinia',
|
|
}),
|
|
persist: true,
|
|
})
|
|
```
|
|
|
|
## Configuration
|
|
|
|
You can configure how a store is persisted by specifying options to the `persist` property:
|
|
|
|
```ts
|
|
export const useStore = defineStore('store', () => {
|
|
const someState = ref('hello pinia')
|
|
return { someState }
|
|
}, {
|
|
persist: {
|
|
storage: sessionStorage,
|
|
pick: ['someState'],
|
|
},
|
|
})
|
|
```
|
|
|
|
All the available configuration options are explained [here](https://praz.codeberg.page/pinia-plugin-persistedstate/guide/config).
|
|
|
|
## Usage with Nuxt
|
|
|
|
Nuxt support comes out of the box thanks to the included module. You just need to install the package and add the module to your `nuxt.config.ts` as follows:
|
|
|
|
```ts
|
|
export default defineNuxtConfig({
|
|
modules: [
|
|
'@pinia/nuxt', // required
|
|
'pinia-plugin-persistedstate/nuxt',
|
|
],
|
|
})
|
|
```
|
|
|
|
More information on storages and configuration in Nuxt [here](https://praz.codeberg.page/pinia-plugin-persistedstate/frameworks/nuxt).
|
|
|
|
## Limitations
|
|
|
|
There are several limitations that should be considered, more on those [here](https://praz.codeberg.page/pinia-plugin-persistedstate/guide/limitations).
|
|
|
|
## Contributing
|
|
|
|
See the [contribution guide](https://codeberg.org/praz/pinia-plugin-persistedstate/src/branch/main/CONTRIBUTING.md).
|
|
|
|
## License
|
|
|
|
[MIT](https://codeberg.org/praz/pinia-plugin-persistedstate/src/branch/main/LICENSE) © 2021-present [praz](https://codeberg.org/praz)
|
|
|
|
[version-src]: https://img.shields.io/npm/v/pinia-plugin-persistedstate?style=flat-square&labelColor=313244&color=cba6f7
|
|
[version-href]: https://npmjs.com/package/pinia-plugin-persistedstate
|
|
[bundle-src]: https://img.shields.io/bundlejs/size/pinia-plugin-persistedstate?style=flat-square&labelColor=313244&color=cba6f7
|
|
[bundle-href]: https://bundlejs.com/?q=pinia-plugin-persistedstate
|
|
[license-src]: https://img.shields.io/npm/l/pinia-plugin-persistedstate?style=flat-square&labelColor=313244&color=cba6f7
|
|
[license-href]: https://codeberg.org/praz/pinia-plugin-persistedstate/src/branch/main/LICENSE
|