https://github.com/prazdevs/pinia-plugin-persistedstate
Artwork from Pinia
Configurable persistence and rehydration of Pinia stores.
- Persist Pinia stores with a friendly API inspired by
vuex-persistedstate
. - Highly customisable with custom storage, customer serializer, paths picking...
- Compatible with everything that uses Pinia.
- No external dependencies in a tiny package (<1kB gzipped).
-
Install with your favorite package manager:
- pnpm :
pnpm i pinia-plugin-persistedstate
- npm :
npm i pinia-plugin-persistedstate
- yarn :
yarn add pinia-plugin-persistedstate
- pnpm :
-
Add the plugin to pinia:
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
- Add the
persist
option to the store you want to be persisted:
import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: true,
})
You can configure how a store is persisted by specifying options to the persist
property:
import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: {
storage: sessionStorage,
paths: ['someState'],
},
})
All the available configuration options are explained here.
There are some limitations that should be considered, more on those here.
Run into a problem? Open an issue. Want to add some feature? PRs are welcome!
Feel free to contact me:
Copyright © 2021-present Sacha Bouillez.
This project is under MIT license.
npm install
npm run serve
npm run build
npm run lint