Pinia 增强封装

基于 Pinia 的增强封装，集成状态持久化（localStorage，zipson 压缩），开箱即用，API 与原生 Pinia 保持一致。

特性

• 开箱即用：已集成并激活 pinia-plugin-persistedstate
• 高效压缩：持久化数据采用 zipson 压缩，显著减小 localStorage 占用
• API 一致：完整导出 Pinia 常用 API（如 defineStore、storeToRefs 等）
• 灵活配置：提供预设的 persistOptions，可快速为 Store 添加持久化

安装

可通过包管理器直接安装：

1pnpm add @ethan-utils/pinia
2# 或
3npm install @ethan-utils/pinia
4# 或
5yarn add @ethan-utils/pinia

快速上手

1. 在 Vue 应用中注册

在应用入口文件（如 src/main.ts）导入并注册 pinia：

1import { createApp } from "vue";
2import App from "./App.vue";
3import pinia from "@ethan-utils/pinia";
4
5const app = createApp(App);
6app.use(pinia);
7app.mount("#app");

2. 创建 Store

支持组合式 API 和选项式 API 两种写法。

组合式 API 示例（推荐）

1// stores/user.ts
2import { defineStore, persistOptions } from "@ethan-utils/pinia";
3import { ref } from "vue";
4
5export const useUserStore = defineStore(
6  "user",
7  () => {
8    const userId = ref<number | null>(null);
9    const token = ref("");
10    const profile = ref<Record<string, any>>({});
11
12    function login(id: number, t: string) {
13      userId.value = id;
14      token.value = t;
15    }
16    function logout() {
17      userId.value = null;
18      token.value = "";
19      profile.value = {};
20    }
21
22    return { userId, token, profile, login, logout };
23  },
24  {
25    persist: persistOptions,
26  },
27);

选项式 API 示例

1// stores/ui.ts
2import { defineStore } from "@ethan-utils/pinia";
3
4export const useUIStore = defineStore("ui", {
5  state: () => ({
6    isSidebarOpen: true,
7    isLoading: false,
8  }),
9  actions: {
10    toggleSidebar() {
11      this.isSidebarOpen = !this.isSidebarOpen;
12    },
13  },
14  // 如需持久化可加 persist: persistOptions
15});

---

如需更多用法，请参考 Pinia 官方文档或本包源码。