Artwork from Pinia

pinia-plugin-persistedstate

Configurable persistence and rehydration of Pinia stores.

English | 简体中文

✨ Features

• 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).

🚀 Quickstart

1. Install with your favorite package manager:

   • pnpm : pnpm i pinia-plugin-persistedstate
   • npm : npm i pinia-plugin-persistedstate
   • yarn : yarn add pinia-plugin-persistedstate

2. 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:

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: true,
})

🔧 Configuration

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.

⚠️ Limitations

There are some limitations that should be considered, more on those here.

🤝 Contributing

Run into a problem? Open an issue. Want to add some feature? PRs are welcome!

📝 License

Copyright © 2021-present Sacha Bouillez. This project is under MIT license.