pinia-plugin-store

pinia tools plugin

install

npm i pinia-plugin-store

API

property	type	description	default
stores	(string Ι StoreOptions)[]	pinia store keys(specify the store that needs to be persiste)	undefined
storage	storage	persistent strategy	localStorage
encrypt	(value: string) => string	persistent encryption	undefined
decrypt	(value: string) => string	persistent decryption	undefined

Example

theme.ts

import { defineStore } from 'pinia';

export const useThemeStore = defineStore({
  id: 'theme_store',
  state: () => ({
    theme: 'dark',
  }),
  actions: {
    setTheme(theme: string) {
      this.theme = theme;
    },
  },
});

store.ts (Example 1)

simple configuration

import { createPinia } from 'pinia';
import { storePlugin } from 'pinia-plugin-store';

const store = createPinia();

const plugin = storePlugin({
  stores: ['theme_store'],
});

store.use(plugin);

export default store;

store.ts (Example 2)

specify a storage alone

import { createPinia } from 'pinia';
import { storePlugin } from 'pinia-plugin-store';

const store = createPinia();

const plugin = storePlugin({
  stores: [{ name: 'theme_store', storage: sessionStorage }, 'user_store'],
  storage: localStorage,
});
store.use(plugin);

export default store;

store.ts (Example 3)

encryption

import { createPinia } from 'pinia';
import { storePlugin } from 'pinia-plugin-store';
import Utf8 from 'crypto-js/enc-utf8';
import Base64 from 'crypto-js/enc-base64';

const store = createPinia();

function encrypt(value: string): string {
  return Base64.stringify(Utf8.parse(value));
}

function decrypt(value: string): string {
  return Base64.parse(value).toString(Utf8);
}

const plugin = storePlugin({
  stores: [{ name: 'theme_store' }],
  encrypt,
  decrypt,
});

store.use(plugin);

export default store;

store.ts (Example 4)

disable encryption

import { createPinia } from 'pinia';
import { storePlugin } from 'pinia-plugin-store';
import Utf8 from 'crypto-js/enc-utf8';
import Base64 from 'crypto-js/enc-base64';

const store = createPinia();

function encrypt(value: string): string {
  return Base64.stringify(Utf8.parse(value));
}

function decrypt(value: string): string {
  return Base64.parse(value).toString(Utf8);
}

const plugin = storePlugin({
  stores: [{ name: 'theme_store', ciphertext: false }],
  storage: localStorage,
  encrypt,
  decrypt,
});

store.use(plugin);

export default store;

main.ts

import { createApp } from 'vue';
import store from './store';
import App from './App.vue';

const app = createApp(App);
app.use(store);
app.mount('#app');