pinia-plugin-persistedstate

pinia-plugin-persistedstate

Go to documentation

Configurable persistence and rehydration of Pinia stores.

Artwork from Pinia

pinia-plugin-persistedstate

Configurable persistence and rehydration of Pinia stores.

npm CI Coverage License

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)
  1. 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'],  },})

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!

👤 About the author

Feel free to contact me:

twitter: @prazdevs

📝 License

Copyright © 2022 Sacha Bouillez.
This project is under MIT license.