后端前端认证鉴权低代码企业应用【免费下载链接】gin-vue-adminViteVue3Gin的开发基础平台支持TS和JS混用。它集成了JWT鉴权、权限管理、动态路由、显隐可控组件、分页封装、多点登录拦截、资源权限、上传下载、代码生成器【可AI辅助】、表单生成器和可配置的导入导出等开发必备功能。项目地址https://gitcode.com/flipped-aurora/gin-vue-admin点击查看免费下载本文以 aiDoc/examples/frontend/pinia-example.md 为骨架结合 gin-vue-admin 仓库web/src/pinia/目录下的真实实现系统讲解 Pinia store 在项目中的职责边界、推荐写法、底层源码佐证与常见反模式。读完本文你将掌握如何在 gin-vue-admin 中编写规范、可复用、可被 AI 与团队成员稳定维护的全局状态模块包括用户态、动态路由、字典缓存、系统参数等典型场景的完整落地方案。一、Pinia Store 在项目中的职责边界1.1 这个文件负责什么在 gin-vue-admin 前端架构中Pinia store 承担的是全局状态、异步动作与跨页面共享数据的职责而不负责页面渲染细节。这一边界在 aiDoc/examples/frontend/pinia-example.md 中被明确为第一原则store 只存放需要被多个页面或组件共享、或需要统一缓存与集中副作用的业务状态页面局部、一次性使用的 UI 状态如弹窗显隐、表单草稿应留在组件内部不要提升到全局DOM 操作、布局细节等展示层逻辑不得进入 store。该约束同时与项目级前端规范 aiDoc/frontend-backend/frontend-rules.md 呼应全局状态统一使用 Pinia而 HTTP 请求统一走/utils/request.js。也就是说store 内的异步动作应调用/api/**下封装的接口函数而不是直接手写 axios。1.2 什么时候应该使用全局 store根据原文档以下场景适合放进 Pinia store用户信息、路由、字典、系统参数等共享状态例如登录用户的userInfo、登录态 token、动态路由表、菜单结构、字典表数据、系统级参数多页面都会用到的业务状态例如跨页面共享的订单列表、公共筛选条件需要统一缓存或集中副作用的场景例如字典数据只需请求一次后续所有页面复用缓存登录后统一初始化路由与权限等副作用。与之相对的以下内容不适合放入全局 store只服务于单个页面的临时 UI 状态页面渲染细节与 DOM 操作一次性事件处理。二、推荐写法Setup 风格 store 完整示例原文档给出了一份可直接套用的标准模板使用defineStore的Setup 风格组合式 API以ref computed async action组织状态、派生值与异步动作。下面是在原示例基础上补充了注释与边界说明的完整版本import { defineStore } from pinia import { ref, computed } from vue import { getOrderList } from /api/order export const useOrderStore defineStore(order, () { // —— 状态state用 ref 声明响应式数据 —— const list ref([]) // 列表数据 const total ref(0) // 总数 const loading ref(false) // 加载中标记 // —— 派生状态getters用 computed 计算 —— const hasData computed(() list.value.length 0) // —— 异步动作actionsasync 函数内调用 api 层 —— const fetchList async (params) { loading.value true try { const res await getOrderList(params) // 遵循前后端契约统一响应结构 { code, data, msg } if (res.code 0) { list.value res.data.list total.value res.data.total } return res } finally { loading.value false } } // —— 重置动作提供明确的清空入口 —— const reset () { list.value [] total.value 0 } // 统一暴露给外部使用 return { list, total, loading, hasData, fetchList, reset } })这段模板中的几个关键点需要特别注意统一响应结构契约res.code 0的判断源于 gin-vue-admin 的前后端边界约定。根据 aiDoc/frontend-backend/boundary.md前端与后端的协作契约是统一响应结构{ code, data, msg }分页结构为{ page, pageSize, total, list }。因此示例中res.data.list与res.data.total的取值方式与后端分页接口保持一致。loading与finally配合无论请求成功还是失败loading都会在finally中复位避免页面卡在加载态computed派生值如hasData这类由状态计算而来的值放在 store 内计算页面层直接消费即可reset显式重置为后续登出、切换用户、刷新数据提供统一入口避免各页面各自手动清状态导致遗漏。三、仓库真实实现剖析四个典型 store 的源码级解读原文档末尾列出了三个真实参考文件web/src/pinia/目录下实际共有五个 store 模块web/src/pinia/modules/它们共同构成了 gin-vue-admin 前端状态层的完整范例。逐一剖析如下。3.1 统一注册入口index.js 与 main.js在 web/src/pinia/index.js 中项目通过createPinia()创建 store 实例并集中导出store与各 store 的 use 函数import { createPinia } from pinia import { useAppStore } from /pinia/modules/app import { useUserStore } from /pinia/modules/user import { useDictionaryStore } from /pinia/modules/dictionary const store createPinia() export { store, useAppStore, useUserStore, useDictionaryStore }随后在 web/src/main.js 中通过app.use(store)注册到 Vue 应用使所有组件与页面都可以调用useXxxStore()获取全局状态app .use(run) .use(ElementPlus) .use(store) .use(auth) .use(clickOutSide) .use(router) .mount(#app)3.2 user.js用户态与登录副作用的完整闭环web/src/pinia/modules/user.js 是项目中最典型的状态 副作用集中管理示例完整演示了原文档强调的把 loading 和 reset 一并收进 store调用侧更干净状态定义userInfo用ref保存用户信息含uuid、nickName、headerImg、authoritytoken通过useStorage(token, )持久化到 localStoragexToken通过useCookies()读写 cookiecurrentToken用computed聚合二者取其一。集中副作用LoginIn动作内部统一完成了ElLoading全屏 loading 的开启与关闭finally中loadingInstance.value?.close()、登录成功后的用户信息写入、token 写入、动态路由初始化调用 router store 的SetAsyncRouter、router.addRoute注册、默认首页跳转等一整套登录副作用登出闭环LoginOut调用jsonInBlacklist()将 token 拉黑随后执行ClearStorage()清理 token、cookie、sessionStorage 与 localStorage 中的相关项最后跳转登录页并window.location.reload()跨 store 协作LoginIn内部通过useRouterStore()调用路由 store这正是原文档所述多页面共享状态 集中副作用的真实写照——登录这一动作跨越了 user 与 router 两个 store但所有调用关系都被收敛在 user store 内部。3.3 router.js动态路由与菜单的全局缓存web/src/pinia/modules/router.js 将动态路由、菜单、keep-alive 组件缓存集中到 store 中SetAsyncRouter从后端asyncMenu()拉取菜单并组装路由先构造/layout基础路由再附加reload等隐藏路由通过formatRouter递归打平并建立routeMap名称索引最后由 web/src/utils/asyncRouter.js 的asyncRouterHandle用import.meta.glob完成 view/plugin 组件的懒加载映射keepAliveRouters通过KeepAliveFilter递归收集带keepAlive标记的路由组件并结合pathInfo.json与 tabs 历史动态计算需要缓存的组件名setKeepAliveRouterstopMenu/leftMenu/topActive分别保存顶部与左侧菜单结构及当前激活项供 layout 消费。这一模块直接印证了原文档的适用场景判断——路由与菜单属于用户信息、路由、字典、系统参数等共享状态且承载了登录后动态路由注册这一关键副作用。3.4 dictionary.js 与 params.js统一缓存范式web/src/pinia/modules/dictionary.js 演示了统一缓存或集中副作用的最佳实践dictionaryMap以ref({})保存字典缓存key 形如${type}_tree、${type}_depth_${depth}、${type}_value_${value}_depth_${depth}getDictionary(type, depth, value)先查缓存命中直接返回未命中才请求后端getDictionaryTreeListByType并对树形数据执行normalizeTreeData、filterTreeByDepth、flattenTree等标准化处理最后写入缓存返回请求失败时通过try/catch回退到findSysDictionary平铺接口保证接口兼容性。同样的先查缓存、再发请求、写入缓存范式也出现在 web/src/pinia/modules/params.js 的getParams中。这种模式让多个页面共享字典/参数数据时只触发一次网络请求是原文档所述需要统一缓存场景的标准解法。此外web/src/pinia/modules/app.js 用reactive管理全局 UI 配置主题色、暗黑模式、侧栏宽度、水印、过渡动画等并通过watchEffect将配置同步到 DOM如setBodyPrimaryColor、html-weakenssclass展示了配置型共享状态的另一种写法。四、为什么推荐这种写法设计原则解读原文档给出了三条核心理由结合仓库源码可以进一步展开ref computed async action是当前仓库里很自然的组织方式从 web/src/pinia/modules/user.js 到 web/src/pinia/modules/dictionary.js全部五个 store 都统一采用这一组合式 API 风格。状态用ref、派生值用computed、异步逻辑用 async 函数结构一目了然也便于 AI 与协作者快速理解。页面层拿 store 结果即可不必重复写状态管理逻辑例如登录页只需调用userStore.LoginIn(loginInfo)加载动画、token 持久化、动态路由注册全部在 store 内完成业务页面只需dictionaryStore.getDictionary(type)即可拿到带缓存的字典数据无需关心请求细节。把 loading 和 reset 一并收进 store调用侧更干净user.js的LoginIn在finally中关闭全屏 loadingdictionary.js通过setDictionaryMap统一维护缓存写入。页面层无需散落多处 loading 控制与清理代码状态的一致性由 store 单点保证。五、常见错误与规避方法原文档列举了三类高频反模式结合仓库实现给出针对性规避方案常见错误危害正确做法把所有局部页面状态都塞进全局 storestore 膨胀、响应式追踪开销增大、状态流难以追踪仅将多页面共享或需要统一缓存的状态放入 store局部 UI 状态留在组件ref/reactive中在 store 里写大量 DOM 操作破坏关注点分离store 与渲染层强耦合难以测试与复用DOM 操作留在组件内需要响应 DOM 的全局配置可像 web/src/pinia/modules/app.js 那样用watchEffect在 store 边界处做受控同步不做 loading / reset 管理请求期间页面无反馈、登出/切换用户后旧数据残留每个异步 action 内用try/finally收尾 loading为 store 提供reset/ClearStorage等显式重置入口参考user.js的ClearStorage此外结合 aiDoc/frontend-backend/frontend-rules.md 还有两点补充HTTP 请求必须统一走/utils/request.js不要在 store 内直接使用 axiosstore 内异步动作调用的接口函数应放置在 web/src/api/ 或web/src/plugin/name/api/中遵循 API 封装规范。六、完整落地路径与参考清单如果你需要在 gin-vue-admin 中新增一个全局 store推荐按以下路径实施创建 store 文件在web/src/pinia/modules/下新建name.js使用 Setup 风格defineStore参考 aiDoc/examples/frontend/pinia-example.md 的模板组织 state / getters / actions封装接口层在 web/src/api/ 对应模块或插件目录web/src/plugin/name/api/封装后端接口统一走/utils/request.js遵守{ code, data, msg }响应契约注册导出在 web/src/pinia/index.js 中导入并导出新的 use 函数如需要可在页面中直接import { useXxxStore } from /pinia在组件中消费组件内调用const xxxStore useXxxStore()通过storeToRefs解构响应式状态保持响应性通过 store 暴露的 action 触发异步与副作用。核心参考文件汇总规范模板aiDoc/examples/frontend/pinia-example.md注册入口web/src/pinia/index.js、web/src/main.js用户态示例web/src/pinia/modules/user.js动态路由示例web/src/pinia/modules/router.js、web/src/utils/asyncRouter.js字典缓存示例web/src/pinia/modules/dictionary.js系统参数示例web/src/pinia/modules/params.js全局配置示例web/src/pinia/modules/app.js配套规范aiDoc/frontend-backend/frontend-rules.md、aiDoc/frontend-backend/boundary.md赞分享后端前端认证鉴权低代码企业应用【免费下载链接】gin-vue-adminViteVue3Gin的开发基础平台支持TS和JS混用。它集成了JWT鉴权、权限管理、动态路由、显隐可控组件、分页封装、多点登录拦截、资源权限、上传下载、代码生成器【可AI辅助】、表单生成器和可配置的导入导出等开发必备功能。项目地址https://gitcode.com/flipped-aurora/gin-vue-admin点击查看免费下载相关推荐ModelScan实战指南3步构建全面的AI模型安全防护体系ModelScan实战指南3步构建全面的AI模型安全防护体系 在当今AI驱动的世界中机器学习模型已成为企业核心资产。然而随着模型共享和部署的普及一个被严gin-vue-admin状态管理Pinia状态管理最佳实践gin vue admin状态管理Pinia状态管理最佳实践 前言为什么选择Pinia 在现代Vue.js应用开发中状态管理是一个绕不开的话题。gin后端前端认证鉴权低代码任务调度gin-vue-admin前端状态持久化localStorage与Pinia结合gin vue admin前端状态持久化localStorage与Pinia结合 在现代Web应用开发中前端状态管理和持久化是提升用户体验的关键环节。gin后端前端认证鉴权低代码任务调度上一篇如何5分钟完成Aria2终极部署一键安装管理脚本完全指南下一篇如何利用Linaria与TypeScript构建类型安全的样式系统完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考