关于vue.js:vuquery-目前vue3最好用的请求缓存库

前言

名字的由来 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 的可用性问题。不必放心上手难的问题，文档中也有很多写好的我的项目能够参照。

仓库与文档

• github 仓库
• 文档
• 示例

介绍

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')

待办

• 文档因为也是由 react-query 的文档复制批改而来的，所以没有中文的，或者之后会加上。
• 因为 vue3 的测试工具也没有出，等测试工具公布之后会加上残缺的测试用例。