Configurable persistence and rehydration of Pinia stores.
npm install pinia-plugin-persistedstatevuex-persistedstate.
Nuxt.
pnpm add pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate
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.
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',
],
})
``