https://github.com/mivui/pinia-plugin-store
pinia plugin
https://github.com/mivui/pinia-plugin-store
crypto pinia pinia-plugin vue
Last synced: about 1 month ago
JSON representation
pinia plugin
- Host: GitHub
- URL: https://github.com/mivui/pinia-plugin-store
- Owner: mivui
- License: mit
- Created: 2022-03-16T16:10:20.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-08-24T00:24:10.000Z (about 2 months ago)
- Last Synced: 2025-08-24T04:35:23.191Z (about 2 months ago)
- Topics: crypto, pinia, pinia-plugin, vue
- Language: TypeScript
- Homepage:
- Size: 334 KB
- Stars: 10
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pinia-plugin-store
### pinia tools plugin
[](https://www.npmjs.com/package/pinia-plugin-store)
[](https://npmcharts.com/compare/pinia-plugin-store?minimal=true)
### install
```shell
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
```ts
import { defineStore } from 'pinia';
export const useThemeStore = defineStore('theme_store', {
state: () => {
return {
theme: 'dark',
};
},
actions: {
setTheme(theme: string) {
this.theme = theme;
},
},
});
```
##### store.ts
> simple configuration
```ts
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;
```
> specify a storage alone
```ts
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;
```
> encryption
```ts
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;
```
> disable encryption
```ts
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
```ts
import { createApp } from 'vue';
import store from './store';
import App from './App.vue';
const app = createApp(App);
app.use(store);
app.mount('#app');
```