Pinia 通过响应式 state 存储权限码列表并提供 hasPermission() 判断逻辑，实现按钮动态显隐；支持登录初始化与动态刷新，配合 computed 或自定义指令 v-permission 实时响应权限变更，且与菜单、路由共享同一权限源以保障体验一致。
Pinia 处理前端按钮权限的动态状态列表，核心是把权限码（如 ['user:edit', 'system:delete']）作为响应式状态存进 store，并提供可复用的判断逻辑，让任意组件或指令能实时感知变化、按需渲染按钮。
权限码列表的存储与更新
在 Pinia store 中定义一个响应式数组，用于保存用户当前拥有的全部权限标识：
- 登录成功后，从后端接口一次性获取权限码数组（例如
['sys:user:add', 'sys:role:query']），调用setPermCodeList()存入 store； - 支持后续动态刷新：比如用户切换角色、被管理员临时授予权限时，可再次调用
changePermissionCode()更新列表； - 该列表必须是响应式的——Pinia 的
state天然满足，无需额外ref或reactive包裹。
按钮显隐的判断逻辑封装
通过组合式函数暴露 hasPermission() 方法，供模板或逻辑中调用：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 接收单个权限码（字符串）或多个权限码（数组），例如
hasPermission('user:delete')或hasPermission(['user:edit', 'user:delete'])； - 内部读取 store 中的
permCodeList，用includes或some判断是否存在匹配项； - 多个权限码时，通常采用“或”逻辑（满足其一即可显示），避免过度限制；
- 该函数可直接用于
v-if，也适配自定义指令v-permission的内部校验。
响应式联动的关键细节
按钮是否显示，不仅取决于初始权限，更要响应权限列表的变更：
立即学习“前端免费学习笔记（深入）”；
- 由于
permCodeList是响应式 state，任何对它的修改都会触发依赖它的计算属性或模板重新求值； - 若使用
computed封装判断（如const canDelete = computed(() => hasPermission('user:delete'))），则按钮会自动更新； - 避免在 setup 中缓存判断结果（如
const showBtn = hasPermission(...)），否则不会响应后续权限变化； - 指令方式更稳妥：
v-permission="['user:edit']"在每次绑定更新时重新执行判断，天然响应 store 变化。
配合路由与菜单做统一权限基线
按钮权限不是孤立的，它和菜单、路由权限共享同一份权限码源：
- 菜单是否渲染、路由能否访问，都基于相同的
permCodeList判断； - 这样确保“看不到菜单 → 进不了页面 → 页面里也点不到按钮”的体验一致性；
- 当权限列表更新时，菜单、路由、按钮三者同步响应，无需分别维护多套状态。
