引用

该插件是 pinia-plugin-persistedstate 的 uniapp 版本，如果你需要在纯 vue 或者 nuxt 项目中使用 pinia 的本地数据缓存，请使用 pinia-plugin-persistedstate。

动机

为了实现多端的更简单的全局本地数据缓存

组织 🦔

欢迎关注 帝莎编程

• 官网
• Gitee
• Github
• 网易云课堂

使用

安装

1. cli 创建的 uniapp 项目

1npm i pinia-plugin-unistorage -D

1// main.js
2import { createSSRApp } from "vue";
3import * as Pinia from "pinia";
4import { createUnistorage } from "pinia-plugin-unistorage";
5
6export function createApp() {
7  const app = createSSRApp(App);
8
9  const store = Pinia.createPinia();
10
11  // 关键代码 👇
12  store.use(createUnistorage());
13
14  app.use(store);
15
16  return {
17    app,
18    Pinia, // 此处必须将 Pinia 返回
19  };
20}

2. hbuilderx 创建的 uniapp 项目

👉 直接插件市场安装 后引入注册

1// main.js
2import { createSSRApp } from "vue";
3import * as Pinia from "pinia";
4import { createUnistorage } from "./uni_modules/pinia-plugin-unistorage";
5
6export function createApp() {
7  const app = createSSRApp(App);
8
9  const store = Pinia.createPinia();
10
11  // 关键代码 👇
12  store.use(createUnistorage());
13
14  app.use(store);
15
16  return {
17    app,
18    Pinia, // 此处必须将 Pinia 返回
19  };
20}

基础

1import { defineStore } from "pinia";
2
3export const useStore = defineStore("main", {
4  state() {
5    return {
6      someState: "hello pinia",
7    };
8  },
9  unistorage: true, // 开启后对 state 的数据读写都将持久化
10});

或者 setup 语法也是支持的

1import { defineStore } from "pinia";
2
3export const useStore = defineStore(
4  "main",
5  () => {
6    const someState = ref("hello pinia");
7    return { someState };
8  },
9  {
10    unistorage: true, // 开启后对 state 的数据读写都将持久化
11  },
12);

选项

钩子

1import { defineStore } from "pinia";
2
3export const useStore = defineStore("main", {
4  state() {
5    return {
6      someState: "hello pinia",
7    };
8  },
9  unistorage: {
10    // 初始化恢复前触发
11    beforeRestore(ctx) {},
12    // 初始化恢复后触发
13    afterRestore(ctx) {},
14  },
15});

序列化

大多数情况下你并不需要了解该选项

1import { defineStore } from "pinia";
2
3export const useStore = defineStore("main", {
4  state() {
5    return {
6      someState: "hello pinia",
7    };
8  },
9  unistorage: {
10    serializer: {
11      // 序列化，默认为 JSON.stringify
12      serialize(v) {
13        return JSON.stringify(v);
14      },
15      // 反序列化，默认为 JSON.parse
16      deserialize(v) {
17        return JSON.parse(v);
18      },
19    },
20  },
21});

其他

1import { defineStore } from "pinia";
2
3export const useStore = defineStore("main", {
4  state() {
5    return {
6      foo: "foo",
7      nested: {
8        data: "nested pinia",
9      },
10      someState: "hello pinia",
11    };
12  },
13  unistorage: {
14    key: "foo", // 缓存的键，默认为该 store 的 id，这里是 main,
15    paths: ["foo", "nested.data"], // 需要缓存的路径，这里设置 foo 和 nested 下的 data 会被缓存
16  },
17});

License

Made with markthree

Published under MIT License.