# pinia-plugin-piniastorage

> pinia 的持久化插件,支持自定义存储方式

Latest version **1.2.0** (published 2024-02-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install pinia-plugin-piniastorage
pnpm add pinia-plugin-piniastorage
yarn add pinia-plugin-piniastorage
bun add pinia-plugin-piniastorage
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-02-19 |
| First published | 2023-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | YeMao-Zi |
| Maintainers | zhushengjie |
| Keywords | pinia, pinia-plugin, storage |

## Links

- npm: https://www.npmjs.com/package/pinia-plugin-piniastorage
- Repository: https://github.com/YeMao-Zi/pinia-plugin-piniastorage
- Homepage: https://github.com/YeMao-Zi/pinia-plugin-piniastorage#readme
- Issues: https://github.com/YeMao-Zi/pinia-plugin-piniastorage/issues
- npm.io page: https://npm.io/package/pinia-plugin-piniastorage

## Recent versions

- 1.2.0 (latest) — 2024-02-19
- 1.1.1 — 2024-02-04
- 1.1.0 — 2023-11-01
- 1.0.9 — 2023-10-24
- 1.0.8 — 2023-08-19
- 1.0.7 — 2023-08-19
- 1.0.6 — 2023-08-19
- 1.0.5 — 2023-08-19
- 1.0.4 — 2023-08-19
- 1.0.3 — 2023-08-19
- 1.0.2 — 2023-07-17
- 1.0.1 — 2023-07-17
- 1.0.0 — 2023-07-13

## README

## 介绍

pinia 的持久化插件，所有的都是可扩展的包括持久存储的方法

默认存储方式为 localStorage.setItem ,如果为移动端不支持，可以替换掉该方法

## 下载
```
npm i pinia-plugin-piniastorage
```

## 注册
``` vue
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import { piniaStorage } from "pinia-plugin-piniastorage";

const store = createPinia();
store.use(piniaStorage());
createApp(App).use(router).use(store).mount('#app');
```

## 基本使用

后面添加对象 `storeOptions:{openStorage:true}`

```ts
import { defineStore } from "pinia";
const useInfoStore = defineStore({
  id: "useInfo",
  state: () => ({
    test: "",
    token: "",
  }),
  getters: {},
  actions: {
    setTest(value: any) {
      this.test = value;
      this.token = "xxx";
    },
  },
  storeOptions: {
    openStorage: true, // 必须为 true 才会运行插件
    storageWay: {
      setStorageWay: (key, data) => sessionStorage.setItem(key, data), // 如这里将存储方法替换为了 sessionStorage
      getStorageWay: (key) => sessionStorage.getItem(key),
    },
    paths:['token'] // 只持久化 token
  },
});
export default useInfoStore;
```

## 全部配置
``` ts
export interface Serializer {
  /**
   * 默认数据格式化的序列方法
   * @default JSON.stringify
   */
  serialize: (value: StateTree) => string;

  /**
   * 默认数据解析方法
   * @default JSON.parse
   */
  deserialize: (value: string) => StateTree;
}

export interface StorageWay {
  /**
   * 默认数据持久化的方法
   * @default localStorage.setItem
   */
  setStorageWay: (key: string, data: any) => void;

  /**
   * 默认数据持久化解析方法
   * @default localStorage.getItem
   */
  getStorageWay: (key: string) => any;
}

export interface YmStateOptions {
  /**
   * 是否开启本地存储
   * @default true
   */
  openStorage?: boolean;
  /**
   * 存储关键字
   * @default $store.id
   */
  key?: string;

  /**
   * 想要保存的部分路径
   * @default undefined
   */
  paths?: Array<string>;

  /**
   * 数据格式化的序列方法
   */
  serializer?: Serializer;
  /**
   * 持久化存储方法.
   */
  storageWay?: StorageWay;
  /**
   * 获取存储数据前触发钩子
   * @default undefined
   */
  beforeRestore?: (context: PiniaPluginContext) => void;

  /**
   * 获取存储数据后触发钩子
   * @default undefined
   */
  afterRestore?: (context: PiniaPluginContext) => void;
}
```

---
_Source: https://npm.io/package/pinia-plugin-piniastorage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._