Schnellstart
Dieser Code-Schnipsel veranschaulicht sehr kurz die 3 Kernkonzepte von Vue Query
Wenn Sie nach einem voll funktionsfähigen Beispiel suchen, schauen Sie sich bitte unser grundlegendes Codesandbox-Beispiel an.
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>
Diese drei Konzepte machen den Großteil der Kernfunktionalität von Vue Query aus. Die nächsten Abschnitte der Dokumentation werden jedes dieser Kernkonzepte im Detail behandeln.
