flat: 缓存

uni_modules/pinia-plugin-unistorage/readme.md

@@ -0,0 +1,226 @@
+<div align="center">
+    <img width="200px" height="200px" src="https://gitee.com/dishait/pinia-plugin-unistorage/raw/main/static/favicon.png" />
+    <h1>pinia-plugin-unistorage</h1>
+    <p>uniapp 下 pinia 的本地数据缓存插件</p>
+</div>
+
+<br />
+<br />
+
+<div align="center">
+    <img width="100%" height="100%" src="https://gitee.com/dishait/pinia-plugin-unistorage/raw/main/static/pinia-plugin-unistorage.gif" />
+</div>
+
+<br />
+<br />
+
+## 引用
+
+该插件是
+[pinia-plugin-persistedstate](https://github.com/prazdevs/pinia-plugin-persistedstate)
+的 `uniapp` 版本，如果你需要在纯 `vue` 或者 `nuxt` 项目中使用 `pinia`
+的本地数据缓存，请使用
+[pinia-plugin-persistedstate](https://github.com/prazdevs/pinia-plugin-persistedstate)。
+
+<br />
+<br />
+
+## 动机
+
+为了实现多端的更简单的全局本地数据缓存
+
+<br />
+<br />
+
+## 组织 🦔
+
+欢迎关注 **帝莎编程**
+
+- [官网](http://dishaxy.dishait.cn/)
+- [Gitee](https://gitee.com/dishait)
+- [Github](https://github.com/dishait)
+- [网易云课堂](https://study.163.com/provider/480000001892585/index.htm?share=2&shareId=480000001892585)
+
+<br />
+<br />
+
+## 使用
+
+### 安装
+
+#### 1. `cli` 创建的 `uniapp` 项目
+
+```shell
+npm i pinia-plugin-unistorage -D
+```
+
+```js
+// main.js
+import { createSSRApp } from "vue";
+import * as Pinia from "pinia";
+import { createUnistorage } from "pinia-plugin-unistorage";
+
+export function createApp() {
+  const app = createSSRApp(App);
+
+  const store = Pinia.createPinia();
+
+  // 关键代码 👇
+  store.use(createUnistorage());
+
+  app.use(store);
+
+  return {
+    app,
+    Pinia, // 此处必须将 Pinia 返回
+  };
+}
+```
+
+<br />
+
+#### 2. `hbuilderx` 创建的 `uniapp` 项目
+
+直接插件市场安装后引入注册
+
+```js
+// main.js
+import { createSSRApp } from "vue";
+import * as Pinia from "pinia";
+import { createUnistorage } from "./uni_modules/pinia-plugin-unistorage";
+
+export function createApp() {
+  const app = createSSRApp(App);
+
+  const store = Pinia.createPinia();
+
+  // 关键代码 👇
+  store.use(createUnistorage());
+
+  app.use(store);
+
+  return {
+    app,
+    Pinia, // 此处必须将 Pinia 返回
+  };
+}
+```
+
+### 基础
+
+```js
+import { defineStore } from "pinia";
+
+export const useStore = defineStore("main", {
+  state() {
+    return {
+      someState: "hello pinia",
+    };
+  },
+  unistorage: true, // 开启后对 state 的数据读写都将持久化
+});
+```
+
+或者 `setup` 语法也是支持的
+
+```js
+import { defineStore } from "pinia";
+
+export const useStore = defineStore(
+  "main",
+  () => {
+    const someState = ref("hello pinia");
+    return { someState };
+  },
+  {
+    unistorage: true, // 开启后对 state 的数据读写都将持久化
+  },
+);
+```
+
+<br />
+
+### 选项
+
+#### 钩子
+
+```js
+import { defineStore } from "pinia";
+
+export const useStore = defineStore("main", {
+  state() {
+    return {
+      someState: "hello pinia",
+    };
+  },
+  unistorage: {
+    // 初始化恢复前触发
+    beforeRestore(ctx) {},
+    // 初始化恢复后触发
+    afterRestore(ctx) {},
+  },
+});
+```
+
+<br />
+
+#### 序列化
+
+大多数情况下你并不需要了解该选项
+
+```js
+import { defineStore } from "pinia";
+
+export const useStore = defineStore("main", {
+  state() {
+    return {
+      someState: "hello pinia",
+    };
+  },
+  unistorage: {
+    serializer: {
+      // 序列化，默认为 JSON.stringify
+      serialize(v) {
+        return JSON.stringify(v);
+      },
+      // 反序列化，默认为 JSON.parse
+      deserialize(v) {
+        return JSON.parse(v);
+      },
+    },
+  },
+});
+```
+
+<br />
+
+#### 其他
+
+```js
+import { defineStore } from "pinia";
+
+export const useStore = defineStore("main", {
+  state() {
+    return {
+      foo: "foo",
+      nested: {
+        data: "nested pinia",
+      },
+      someState: "hello pinia",
+    };
+  },
+  unistorage: {
+    key: "foo", // 缓存的键，默认为该 store 的 id，这里是 main,
+    paths: ["foo", "nested.data"], // 需要缓存的路径，这里设置 foo 和 nested 下的 data 会被缓存
+  },
+});
+```
+
+<br />
+<br />
+
+## License
+
+Made with [markthree](https://github.com/markthree)
+
+Published under [MIT License](./LICENSE).