摘要：无缝衔接 Pinia数据直接进 Store，调试时仍在 DevTools 的“Pinia”面板里，心智零切换。不写样板代码loading / error / data 全返回，模板只关心“渲染”即可。缓存即状态组件销毁、路由跳转、甚至 SSR，都能复用同一份缓
如果你已经把 Vue 状态管理交给 Pinia，却还在手写 loading / error / retry / 缓存失效 那一套“样板代码”！
那么今天的主角——Pinia Colada——会让你忍不住喊一句： “哎呀，怎么不早点出现！”
组件里随用随取：
{{ user.profile.name }}一切都很美好，直到你开始想：
能不能别每次都重新请求？加载态、错误态、轮询、乐观更新、后台刷新……我不想再写一遍！组件卸载后再回来，数据还能保持新鲜吗？一句话：“专为 Vue + Pinia 设计的智能数据获取层”。
它通过提供 useQuery、useMutation 等组合式函数，把异步数据流变成状态流，并自动帮你做：
请求去重 & 内存缓存后台刷新、失效、重试乐观更新、回滚与 Pinia Store 深度集成（数据即状态，状态即数据）零依赖（除 Pinia 外）≈ 2 kB，Tree-Shaking 友好，TypeScript 100%。
无缝衔接 Pinia数据直接进 Store，调试时仍在 DevTools 的“Pinia”面板里，心智零切换。不写样板代码
loading / error / data 全返回，模板只关心“渲染”即可。缓存即状态
组件销毁、路由跳转、甚至 SSR，都能复用同一份缓存。乐观更新
useMutation 内置 onMutate / onError / onSettled，回滚一行代码。插件化 & 可组合
自定义插件、组合函数，逻辑随处复用，与 Vue 生态完全同构。体积够小
2 kB，只拉取用到的函数，再不用担心“为了缓存而引入半个世界”。5 分钟快速上手
1. 安装
npm i pinia @pinia/colada2. 注册插件
// main.tsimport { createApp } from 'vue'import { createPinia } from 'pinia'import { PiniaColada } from '@pinia/colada'const pinia = createPiniapinia.use(PiniaColada)createApp(App).use(pinia).mount('#app')3. 组件里直接查询
Loading…Oops: {{ error.message }}{{ t.title }}4. 提交变更（乐观更新）
const { mutate, isPending } = useMutation({ mutation: (newTodo: string) => axios.post('/api/todos', { title: newTodo }), onMutate: async (newTodo) => { // 立即写到缓存，UI 秒变 const prev = queryClient.getQueryData(['todos']) queryClient.setQueryData(['todos'], old => [...old, { id: Date.now, title: newTodo }]) return { prev } // 回滚快照 }, onError: (err, _, context) => queryClient.setQueryData(['todos'], context.prev),})1. useQuery
作用：取数据
典型用法：列表、详情、搜索
2. useMutation
作用：改数据
典型用法：新增、编辑、删除
3. defineQuery/ defineMutation
作用：在 Store 里复用
典型用法：跨组件共享同一查询
4. queryCache.invalidateQueries
作用：手动失效
典型用法：增删改后刷新列表
结论：
还等啥？
npm i @pinia/colada 一下，
把 loading = true / false 和 try…catch 统统删掉，
感受“状态即缓存，缓存即状态”的丝滑吧！
来源：不秃头程序员
