TanStack Query 会取代 Vuex、Pinia 或其他全局状态管理器吗？

嗯，让我们从几个重要的项目开始

• TanStack Query 是一个服务器状态库，负责管理服务器和客户端之间的异步操作
• Vuex、Pinia、Zustand 等是客户端状态库，可以用来存储异步数据，但与 TanStack Query 这样的工具相比效率较低。

考虑到这些，简短的回答是 TanStack Query 取代了用于在客户端状态中管理缓存数据的样板代码和相关连接，并用几行代码取代了它。

对于绝大多数应用程序来说，在将所有异步代码迁移到 TanStack Query 之后，真正全局可访问的客户端状态通常非常小。

在某些情况下，应用程序可能确实拥有大量的仅同步客户端状态（例如视觉设计器或音乐制作应用程序），在这种情况下，您可能仍然需要一个客户端状态管理器。 在此情况下，需要注意的是TanStack Query 不能替代本地/客户端状态管理。 但是，您可以将 TanStack Query 与大多数客户端状态管理器一起使用，没有任何问题。

这里我们有一些由全局状态库管理的“全局”状态

const globalState = {
  projects,
  teams,
  tasks,
  users,
  themeMode,
  sidebarStatus,
}

const globalState = {
  projects,
  teams,
  tasks,
  users,
  themeMode,
  sidebarStatus,
}

目前，全局状态管理器正在缓存 4 种服务器状态：项目、团队、任务和用户。如果我们将这些服务器状态资产迁移到 TanStack Query，我们剩余的全局状态将更像这样：

const globalState = {
  themeMode,
  sidebarStatus,
}

const globalState = {
  themeMode,
  sidebarStatus,
}

这也意味着，只需通过几个 useQuery 和 useMutation 的 hook 调用，我们就可以删除用于管理服务器状态的任何样板代码，例如：

• 连接器
• Action Creators
• 中间件
• Reducers
• 加载/错误/结果状态
• 上下文

移除了所有这些东西后，您可能会问自己，“为了这个微小的全局状态，值得继续使用我们的客户端状态管理器吗？”

这取决于您！

但 TanStack Query 的作用很明确。它从您的应用程序中删除了异步连接和样板代码，并用几行代码取代了它。

还在等什么，快试试吧！