Configurable persistence and rehydration of Pinia stores.
- Persist Pinia stores with the same API as
vuex-persistedstate
. - Configurable per Pinia store.
- Still compatible with Vue 2 and 3.
- Super small (<1kB).
- Install with your favourite package manager (pnpm, npm, yarn).
- Add the plugin to pinia:
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
You just need to add the persist
option to the store you want to be persisted as follows:
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: true
})
In case you want to configure how the data should be persisted, persist
can take options:
key: string
: Key to use in storage (defaults to the current store id).storage
: Storage like object to persist state to. Must havegetItem
,setItem
andremoveItem
methods (defaults tolocalStorage
).paths: Array<string>
: Array of dot-notation paths to partially persist the state,[]
means no state is persisted (defaults toundefined
and persists the whole state).overwrite: boolean
: Whether you want to ovewrite the initial state on hydration (defaults tofalse
and patches the state).
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
nested: {
data: 'nested pinia',
},
}
},
persist: {
key: 'storekey',
storage: window.sessionStorage,
paths: ['nested.data'],
overwrite: true,
}
})
The config above will only persist the nested.data
property in sessionStorage
under storekey
and will overwrite the state on hydration.
This project tries to bring vuex-persistedstate
's API to Pinia
but I did not bring the whole API yet.
Run into a problem? Open an issue.
Want to add some feature? PRs are welcome!
Feel free to contact me:
Copyright Β© 2021 Sacha Bouillez.
This project is under MIT license.