tanstack-fetch 1.5.0 发布：为 Vue 与 Nuxt 带来 TanStack Query 就绪的 fetch 客户端
译注：本文编译自 dev.to 上发布的 tanstack-fetch 1.5.0 版本说明，原文标题为 "tanstack-fetch 1.5.0 — Vue & Nuxt helpers for a TanStack Query–ready fetch client"，作者为 mwmdgmb。原文链接见文末。需注意，该项目并非 TanStack 官方包。
tanstack-fetch 1.5.0 新增了 tanstack-fetch/vue 入口，为 Vue 3 与 Nuxt 提供 createFetchPlugin、useFetch 和 useSse 三个能力。它与 React 版本共用同一套客户端逻辑：返回数据、抛出 FetchError，并支持传入 TanStack Query 的 signal。
快速上手
在应用入口创建客户端并注册插件：
typescript
import { createFetch } from 'tanstack-fetch'
import { createFetchPlugin, useFetch } from 'tanstack-fetch/vue'
const api = createFetch({ baseUrl: '/api' })
app.use(createFetchPlugin({ client: api }))
// 在组件中 —— useFetch 注入客户端（它本身不发起数据请求）
const api = useFetch()
await api.get('/users')需要留意的是，useFetch 的职责是注入客户端实例，而非直接获取数据，这与 Nuxt 内置同名 API 的语义不同。
SSE 支持
1.5.0 同时提供了 SSE（Server-Sent Events）相关的组合式函数：
typescript
import { createFetch } from 'tanstack-fetch/sse'
import { useSse } from 'tanstack-fetch/vue'
const api = createFetch({ plugins: ['sse-resume'] })
const { data, status, close } = useSse('/orders/stream', { client: api })
// status: connecting | connected | disconnected | errorstatus 会依次在 connecting、connected、disconnected、error 之间流转，便于在界面上呈现连接状态。
Nuxt 命名冲突
由于 Nuxt 自身也导出了 useFetch，在 Nuxt 项目中使用时建议重命名导入，避免冲突：
typescript
import { useFetch as useFetchClient } from 'tanstack-fetch/vue'打包体积（gzip）
| 入口 | 体积 |
|---|---|
| HTTP | 4.81KB |
| Vue | 0.78KB |
| SSE | 5.94KB |
Vue 入口仅增加 0.78KB，对体积敏感的 Vue 3 项目较为友好。
相关链接
- npm：https://www.npmjs.com/package/tanstack-fetch
- Vue 指南：https://mohamadgarmabi.github.io/tanstack-fetch/guide/vue
- GitHub：https://github.com/mohamadgarmabi/tanstack-fetch