ivanq3w / pinia-plugin-persistedstate

🍍 Configurable persistence and rehydration of Pinia stores.

pinia-plugin-persistedstate

Configurable persistence and rehydration of Pinia stores.

✨ Features

• Persist Pinia stores with the same API as vuex-persistedstate.
• Configurable per Pinia store.
• Still compatible with Vue 2 and 3.
• Super small (<1kB).

⚙️ Installing

1. Install with your favourite package manager (pnpm, npm, yarn).
2. Add the plugin to pinia:

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedState)

🚀 Usage

You just need to add the persist option to the store you want to be persisted as follows:

import { defineStore } from 'pinia'

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

In case you want to configure how the data should be persisted, persist can take options:

• key: string : Key to use in storage (defaults to the current store id).
• storage : Storage like object to persist state to. Must have getItem, setItem and removeItem methods (defaults to localStorage).
• paths: Array<string> : Array of dot-notation paths to partially persist the state, [] means no state is persisted (defaults to undefined and persists the whole state).
• overwrite: boolean : Whether you want to ovewrite the initial state on hydration (defaults to false and patches the state).

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
      nested: {
        data: 'nested pinia',
      },
    }
  },
  persist: {
    key: 'storekey',
    storage: window.sessionStorage,
    paths: ['nested.data'],
    overwrite: true,
  }
})

The config above will only persist the nested.data property in sessionStorage under storekey and will overwrite the state on hydration.

🤝 Contributing

This project tries to bring vuex-persistedstate's API to Pinia but I did not bring the whole API yet.

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

👤 About the author

Feel free to contact me:

• 
• 

📝 Licence

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