快速入门

1<script setup>2import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query'34// Access QueryClient instance5const queryClient = useQueryClient()67// Query8const { isLoading, 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="isLoading">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>