Artwork from Pinia
Configurable persistence and rehydration of Pinia stores.
vuex-persistedstate
.Install with your favorite package manager:
pnpm add pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate
Add the plugin to pinia:
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: () => {
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'],
},
})
or
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useStore = defineStore('store', () => {
const someState = ref('hello pinia')
return { someState }
}, {
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!
Copyright © 2021-present Sacha Bouillez. This project is under MIT license.