pinia-plugin-persistedstateGetting Started
WARNING
This is the documentation for the v2 of the plugin. If you are looking for the latest version (v3), check here.
Overview
This plugin is compatible with pinia^2.0.0, make sure you have Pinia installed before proceeding. pinia-plugin-persistedstate comes with many features to make persistence of Pinia stores easy and configurable with:
- An API similar to
vuex-persistedstate. - Per-store configuration.
- Custom storage and custom data serializer.
- Pre and post hydration hooks.
- Multiple configurations per store.
- Compatibility with Vue 2 and 3.
- No external dependencies.
- Super small (<1kB gzipped).
Installation
Install the dependency with your favorite package manager:
- pnpm:
shpnpm i pinia-plugin-persistedstatepnpm i pinia-plugin-persistedstate- npm:
shnpm i pinia-plugin-persistedstatenpm i pinia-plugin-persistedstate- yarn:
shyarn add pinia-plugin-persistedstateyarn add pinia-plugin-persistedstateAdd the plugin to your pinia instance:
ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
Usage
When declaring your store, set the new persist option to true.
Using the option store syntax :
ts
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: true,
})
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: true,
})
Or using the setup store syntax :
ts
import { defineStore } from 'pinia'
export const useStore = defineStore(
'main',
() => {
const someState = ref('hello pinia')
return { someState }
},
{
persist: true,
},
)
import { defineStore } from 'pinia'
export const useStore = defineStore(
'main',
() => {
const someState = ref('hello pinia')
return { someState }
},
{
persist: true,
},
)
Your whole store will now be saved with the default persistence settings.