vu-query: vue3 最好用的请求库之一

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1423 天前的主题，其中的信息可能已经有所发展或是发生改变。

前言

名字的由来 vue + use + query = vu-query

前面两年一直都在写 vue，当时在写业务的时候我总是被数据的缓存和重复实现的分页和延迟加载数据所困扰。直到今年换了 react 的技术栈之后发现其实社区已经有了很多这种轮子，例如 react-query 、swr 等等。但是在写了一段时间的 react 之后，发现要写出一个性能很好的 react 应用真的要写很多很多啰嗦的代码，不久之后开始对这些繁琐的事情感到厌烦。开始怀念起写 vue 的时候不用特别优化就能写出性能不错的代码来。上一年年 6 月时想着不如整一个 vue 版的 react-query 的轮子出来怎么样，但是由于拖延症的原因到上个月才开始着手（笑），到了今天终于发布了 1.0 的版本。它的核心实现来自于 react-query，由于本身 react-query 已经是一个特别成熟的数据请求库，所以也不用担心 vu-query 的可用性问题。不用担心上手难的问题，文档中也有很多写好的项目可以参照。

仓库与文档

介绍

Composables API，用于在 Vue 3 中获取，缓存和更新异步数据

尽管大多数传统状态管理库非常适合使用客户端状态，但它们不太适合使用异步或服务器状态。这是因为“服务器状态完全不同”。对于初学者，服务器状态：

远程保存在您无法控制或拥有的位置
需要异步 API 进行获取和更新
表示共享所有权，在您不知情的情况下可以被其他人更改
如果您不小心，可能会导致应用程序“过时”

一旦掌握了应用程序中服务器状态的性质，随之而来的还有更多挑战，例如：

缓存...（这可能是编程中最难的事情）
将对同一数据的多个请求重复处理为单个请求
在后台更新过期数据
知道数据何时“过时”
尽快反映对数据的更新
优化性能，例如分页和延迟加载数据
管理服务器状态的内存和垃圾回收
通过结构共享记忆查询结果

如果您不被该列表所淹没，那必须意味着您可能已经解决了所有服务器状态问题，应该得到奖励。但是，如果您像绝大多数人一样，或者尚未解决所有或大多数这些挑战，那么我们只是在摸索！

Vu Query 是用于管理服务器状态的最好的库之一。它开箱即用，配置为零，效果非常好，并且可以随应用程序的增长进行定制**。

通过 Vu Query，您可以克服服务状态的棘手挑战和障碍，并在开始控制您的应用程序数据之前对其进行控制。

从技术上讲，Vu Query 可能会：

帮助您从应用程序中删除多行复杂和误解的代码，并替换为几行 Vu Query 逻辑。
使您的应用程序更易于维护，更易于构建新功能，而不必担心连接新的服务器状态数据源
使您的应用程序比以往任何时候都更快，更灵敏，对最终用户有直接影响。
潜在地帮助您节省带宽并提高内存性能

快速开始

此示例非常简要地说明了 Vu Query 的 3 个核心概念：

查询
变异
使查询无效

这三个概念构成了 Vu Query 的大部分核心功能。

import { defineComponent, createApp } from 'vue'
import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from 'vu-query'
import { getTodos, postTodo } from '../my-api'

const Todos = defineComponent(() => {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery('todos', getTodos)

  // Mutations
  const mutation = useMutation(postTodo, {
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries('todos')
    },
  })

  return () => (
    <div>
      <ul>
        {query.data?.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
})

// Create a client
const queryClient = new QueryClient()

const App = defineComponent({
  render() {
    return (
      // Provide the client to your App
      <QueryClientProvider client={queryClient}>
        <Todos />
      </QueryClientProvider>
    )
  },
})

createApp(App).mount('#app')