Vue状态拆开不动了?这款Skill懂

用Pinia在Vue里管理应用状态。

pinia 是指导 AI 在 Vue 项目里使用 Pinia 状态管理的 Skill,来自 Anthony Fu 的技能库。给它 store 和组件代码,它可以围绕状态、派生值、操作方法及测试组织实现。

一个容易踩的点是把状态直接拆出来,之后页面却不跟着更新。文档建议在解构状态或 getters 时使用 storeToRefs 保留响应式联系,而操作方法可以直接解构。这两类成员的处理方式不同。

它还关注多个 store 之间如何协作,避免循环依赖,以及服务端渲染中何时调用 store。复杂逻辑可按需使用 Setup Store,测试则有对应工具入口。

这份资料基于 Pinia 3.0.4,实际应用需与项目版本对照。适合共享状态开始增多、组件之间数据关系不再直观的 Vue 工程。

分类:编程开发

来源仓库:antfu/skills

适合用来做什么

  • 请解释 Pinia 在 Vue 应用中的作用。
  • 如何使用 Pinia 定义存储和状态?

安装 pinia

npx skills add https://www.iskills.cc/skills/antfu/skills/pinia/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 pinia 的用途与原始说明

浏览全部 Skill 指南