前言

你是否还在为 Vue3 项目的状态管理而苦恼？是否希望有一个既强大又易于维护的方法，能够快速落地到你的公司级应用中？现在这不再是难题，

这是一套公司级可直接落地的 Vue3 + Pinia 完整方案。包含：封装、异步请求、路由权限、持久化、模块化、TS 类型，复制即用。告别繁琐的手动配置，让你的开发效率提高 200%！

一、目录结构

src/├── stores/ # Pinia 状态管理│ ├── modules/ # 按模块拆分│ │ ├── user.ts # 使用者、登录、权限│ │ ├── app.ts # 全局配置、主题、菜单│ │ └── counter.ts # 示例│ └── index.ts # 统一导出├── api/ # 接口请求│ └── user.ts├── router/ # 路由│ └── index.ts├── types/ # TS 类型└── main.ts

二、统一封装入口：stores/index.ts

import { createPinia } from 'pinia'import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPiniapinia.useexport * from './modules/user'export * from './modules/app'export * from './modules/counter'export default pinia

在 main.ts 引入：

import { createApp } from 'vue'import pinia from './stores'import App from './App.vue'import router from './router'const app = createAppapp.useapp.useapp.mount

三、最常用模块：使用者权限

stores/modules/user.ts

import { defineStore } from 'pinia'import type { UserInfo。LoginParams } from '@/types/user'import { loginApi,getUserInfoApi } from '@/api/user'export const useUserStore = defineStore =>,getters: { isLogin: =>!，state.token,isAdmin: => state.roles.includes,},actions: { // 登录 async login { const res = await loginApi this.token = res.token return res },// 获取使用者信息 + 权限 async fetchUserInfo { const res = await getUserInfoApi this.userInfo = res.userInfo this.roles = res.roles this.permissions = res.permissions return res }。// 退出登录 logout { this.token = '' this.userInfo = null this.roles = this.permissions = },},})

四、全局配置模块

import { defineStore } from 'pinia'export const useAppStore = defineStore =>,actions: { toggleSidebar { this.sidebarCollapse =!this.sidebarCollapse },switchTheme { this.me = me },}。})

五、异步请求封装

你是否还在重复编写相同的 API 请求代码？现在有了 Pinia 和专门的 API 封装模块。你可以轻松地管理所有请求，并确保代码的可维护性和复用性。

// 模拟接口export async function loginApi { return new Promise => { resolve }) }。) })}export async function getUserInfoApi { return new Promise => { resolve },) })}

六、路由权限控制

安全性是公司级应用的主要需求。不过，我们提供了强大的路由权限控制机制。确保只有拥有相应权限的使用者才能访问特定的页面和功能。

router/index.ts

import { createRouter,createWebHistory } from 'vue-router'import { useUserStore } from '@/stores'const routes =。} ]const router = createRouter,routes })// 路由守卫router .beforeEach=>{ const userStore= useUserStore;const isLogin= userStore .isLogin if { next;老实说，} if { next;} next})export default router

七、组件内使用

无需复杂的逻辑处理，只需几行代码就能轻松地在组件中使用 Pinia store。