快速开始
这段代码片段非常简要地说明了 Vue Query 的 3 个核心概念
如果您正在寻找一个功能齐全的示例，请查看我们的 基础 codesandbox 示例
vue
<script setup>
import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query'
// Access QueryClient instance
const queryClient = useQueryClient()
// Query
const { isPending, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: getTodos,
})
// Mutation
const mutation = useMutation({
mutationFn: postTodo,
onSuccess: () => {
// Invalidate and refetch
queryClient.invalidateQueries({ queryKey: ['todos'] })
},
})
function onButtonClick() {
mutation.mutate({
id: Date.now(),
title: 'Do Laundry',
})
}
</script>
<template>
<span v-if="isPending">Loading...</span>
<span v-else-if="isError">Error: {{ error.message }}</span>
<!-- We can assume by this point that `isSuccess === true` -->
<ul v-else>
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
<button @click="onButtonClick">Add Todo</button>
</template>
<script setup>
import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query'
// Access QueryClient instance
const queryClient = useQueryClient()
// Query
const { isPending, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: getTodos,
})
// Mutation
const mutation = useMutation({
mutationFn: postTodo,
onSuccess: () => {
// Invalidate and refetch
queryClient.invalidateQueries({ queryKey: ['todos'] })
},
})
function onButtonClick() {
mutation.mutate({
id: Date.now(),
title: 'Do Laundry',
})
}
</script>
<template>
<span v-if="isPending">Loading...</span>
<span v-else-if="isError">Error: {{ error.message }}</span>
<!-- We can assume by this point that `isSuccess === true` -->
<ul v-else>
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
<button @click="onButtonClick">Add Todo</button>
</template>
这三个概念构成了 Vue Query 的大部分核心功能。文档的下一节将详细介绍每个核心概念。
