Vue3 + Colada！無(wú)敵了！
如果你已經(jīng)把 Vue 狀態(tài)管理交給 Pinia，卻還在手寫 loading / error / retry / 緩存失效 那一套“樣板代碼”！
那么今天的主角——Pinia Colada——會(huì)讓你忍不住喊一句： “哎呀，怎么不早點(diǎn)出現(xiàn)！”
Pinia：極簡(jiǎn)狀態(tài)管理的“地基”
Pinia 作為 Vue 官方推薦的新一代狀態(tài)管理庫(kù)
用“扁平的 Store + 天然的 Composition API”讓“全局狀態(tài)”這件事前所未有的簡(jiǎn)單：
// stores/user.ts
export const useUserStore = defineStore('user', () => {
const profile = ref<User | null>(null)
async function fetchUser(id: number) {
profile.value = await axios.get(`/api/user/${id}`)
}
return { profile, fetchUser }
})組件里隨用隨?。?/p>
<script setup>
const user = useUserStore()
await callWhenReady(user.fetchUser, route.params.id)
</script>
<template>
<div v-if="user.profile">{{ user.profile.name }}</div>
</template>一切都很美好，直到你開(kāi)始想：
- 能不能別每次都重新請(qǐng)求？
- 加載態(tài)、錯(cuò)誤態(tài)、輪詢、樂(lè)觀更新、后臺(tái)刷新……我不想再寫一遍！
- 組件卸載后再回來(lái)，數(shù)據(jù)還能保持新鮮嗎？
這些能力 Pinia本身都不管，只能靠自己“手搓”。于是——Pinia Colada 來(lái)了，它把上面所有“臟活累活”一次性打包好，還無(wú)縫貼合 Pinia 的編程體驗(yàn)。
Pinia Colada 是什么？
一句話：“專為 Vue + Pinia 設(shè)計(jì)的智能數(shù)據(jù)獲取層”。
它通過(guò)提供 useQuery、useMutation 等組合式函數(shù)，把異步數(shù)據(jù)流變成狀態(tài)流，并自動(dòng)幫你做：
- 請(qǐng)求去重 & 內(nèi)存緩存
- 后臺(tái)刷新、失效、重試
- 樂(lè)觀更新、回滾
- 與 Pinia Store 深度集成（數(shù)據(jù)即狀態(tài)，狀態(tài)即數(shù)據(jù)）
零依賴（除 Pinia 外）≈ 2 kB，Tree-Shaking 友好，TypeScript 100%。
Pinia Colada 的 6 大優(yōu)勢(shì)
(1) 無(wú)縫銜接 Pinia
數(shù)據(jù)直接進(jìn) Store，調(diào)試時(shí)仍在 DevTools 的“Pinia”面板里，心智零切換。
(2) 不寫樣板代碼
loading / error / data 全返回，模板只關(guān)心“渲染”即可。
(3) 緩存即狀態(tài)
組件銷毀、路由跳轉(zhuǎn)、甚至 SSR，都能復(fù)用同一份緩存。
(4) 樂(lè)觀更新
useMutation 內(nèi)置 onMutate / onError / onSettled，回滾一行代碼。
(5) 插件化 & 可組合
自定義插件、組合函數(shù)，邏輯隨處復(fù)用，與 Vue 生態(tài)完全同構(gòu)。
(6) 體積夠小
2 kB，只拉取用到的函數(shù)，再不用擔(dān)心“為了緩存而引入半個(gè)世界”。
五分鐘快速上手
(1) 安裝
npm i pinia @pinia/colada(2) 注冊(cè)插件
// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { PiniaColada } from '@pinia/colada'
const pinia = createPinia()
pinia.use(PiniaColada)
createApp(App).use(pinia).mount('#app')(3) 組件里直接查詢
<script setup>
import { useQuery } from '@pinia/colada'
const { data, isLoading, error } = useQuery({
key: ['todos'],
query: () => fetch('/api/todos').then(r => r.json()),
staleTime: 5000, // 5 秒內(nèi)不重復(fù)請(qǐng)求
})
</script>
<template>
<div v-if="isLoading">Loading…</div>
<div v-else-if="error">Oops: {{ error.message }}</div>
<ul v-else>
<li v-for="t in data" :key="t.id">{{ t.title }}</li>
</ul>
</template>(4) 提交變更（樂(lè)觀更新）
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),
})必知四大核心 API
(1) useQuery
作用：取數(shù)據(jù)典型用法：列表、詳情、搜索
(2) useMutation
作用：改數(shù)據(jù)典型用法：新增、編輯、刪除
(3) defineQuery / defineMutation
作用：在 Store 里復(fù)用典型用法：跨組件共享同一查詢
(4) queryCache.invalidateQueries
作用：手動(dòng)失效典型用法：增刪改后刷新列表
與 TanStack Query 的“友好對(duì)比”
TanStack Query 是 React 世界的“數(shù)據(jù)獲取王者”，Vue 社區(qū)也有同名移植版。
兩者都提供緩存、后臺(tái)刷新、樂(lè)觀更新等能力，但定位與生態(tài)融合度略有差異：
維度 | TanStack Query (Vue) | Pinia Colada |
生態(tài)理念 | 框架無(wú)關(guān)，通用緩存層 | 專為 Vue + Pinia 而生 |
狀態(tài)歸屬 | 獨(dú)立于 Store，另起爐灶 | 查詢結(jié)果 = Pinia State ，DevTools 一站式查看 |
學(xué)習(xí)曲線 | 需理解 queryClient / QueryCache 新概念 | 沿用 ref / computed / watch 即可 |
插件擴(kuò)展 | 提供 queryClient 級(jí)插件 | 直接寫 Pinia 插件 ，與現(xiàn)有 Store 邏輯無(wú)縫組合 |
體積 | ~ 13 kB（核心） | ~ 2 kB（核心） |
SSR | 支持 | 支持，且自動(dòng)復(fù)用 Pinia 的 SSR 注入 |
結(jié)論：
- 若你同時(shí)維護(hù) React & Vue 項(xiàng)目，需要“一份 API 到處跑”，TanStack Query 仍是穩(wěn)妥選擇。
- 若你深耕 Vue 生態(tài)，已經(jīng)用 Pinia 管理所有狀態(tài)，只想“用最 Vue 的方式搞定接口緩存”，Pinia Colada 會(huì)更順手、更輕量、更一體化。
寫在最后
Pinia 負(fù)責(zé)“狀態(tài)”，Pinia Colada 負(fù)責(zé)“拿狀態(tài)的路上所有臟活”。兩者加在一起，無(wú)需額外概念、零樣板、體積忽略不計(jì)，卻能讓你的 Vue 項(xiàng)目瞬間擁有工業(yè)級(jí)的數(shù)據(jù)獲取體驗(yàn)。
還等啥？
npm i @pinia/colada 一下，把 loading = true / false 和 try…catch 統(tǒng)統(tǒng)刪掉，感受“狀態(tài)即緩存，緩存即狀態(tài)”的絲滑吧！
官網(wǎng)地址：https://pinia-colada.esm.dev/
