快速入门

更新于 2026-11-02 Vue 查看英文原文 ↗

此代码片段简要展示了 Vue Query 的三个核心概念：

如果你希望查看一个完整可运行的示例，请参阅我们的基础 CodeSandbox 示例。

HTML

1<script setup>2import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query'34// Access QueryClient instance5const queryClient = useQueryClient()67// Query8const { isPending, isError, data, error } = useQuery({9  queryKey: ['todos'],10  queryFn: getTodos,11})1213// Mutation14const mutation = useMutation({15  mutationFn: postTodo,16  onSuccess: () => {17    // Invalidate and refetch18    queryClient.invalidateQueries({ queryKey: ['todos'] })19  },20})2122function onButtonClick() {23  mutation.mutate({24    id: Date.now(),25    title: 'Do Laundry',26  })27}28</script>29 30<template>31  <span v-if="isPending">Loading...</span>32  <span v-else-if="isError">Error: {{ error.message }}</span>33  <!-- We can assume by this point that `isSuccess === true` -->34  <ul v-else>35    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>36  </ul>37  <button @click="onButtonClick">Add Todo</button>38</template>

这三个概念构成了 Vue Query 核心功能的主体。文档后续章节将对每个核心概念进行详细说明。