前言

名字的由来 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 clientconst 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的测试工具也没有出，等测试工具公布之后会加上残缺的测试用例。