unstorage-pinia-plugin

Persist and hydrate your pinia state using Unstorage!

Install

# npm
npm i unstorage unstorage-pinia-plugin

# yarn
yarn add unstorage unstorage-pinia-plugin

Usage

You can use any available Unstorage driver. Drivers can be set either globally or per store. Locally defined driver overrides global definition.

Global driver:

// pinia.ts
import { createPinia } from 'pinia';
import { createUnstoragePlugin } from 'unstorage-pinia-plugin';

const pinia = createPinia();

pinia.use(createUnstoragePlugin({
  // unstorage plugin options
}));

export default pinia;

Per store driver:

// pinia.ts
import { createPinia } from 'pinia';
import { createUnstoragePlugin } from 'unstorage-pinia-plugin';

const pinia = createPinia();

pinia.use(createUnstoragePlugin());

export default pinia;

// store.ts
import { computed, ref } from 'vue';
import { defineStore } from 'pinia';
import { defineStoreStorage } from 'unstorage-pinia-plugin';

export const useStore = defineStore(
  'store',
  () => {
    // setup and return your state, getters and actions
  },
  {
    unstorage: {
      // unstorage store options
    }
  }
);

If you prefer the old option way:

import { persistStore } from 'unstorage-pinia-plugin';

export const useStore = persistStore(
  defineStore(
    'store',
    {
      // define your state, getters and actions
    }
  ),
  {
    // unstorage store options
  }
);

May work with Nuxt, be not tested:

import { persistStore } from 'unstorage-pinia-plugin';

export const useStore = defineStore(
  'store',
  {
    // define your state, getters and actions
  }
);

persistStore(useStore,
  {
    // unstorage store options
  }
);

Configuration

Plugin options

• driver: Driver : Default unstorage driver.

Store options

• driver: Driver : Driver for the store.
• filter?: Array<string> : State keys you actually want to persist. All keys are pushed by default.

License

MIT