Quick Start

如果您正在寻找一个完全运行的示例，请查看我们的 基础代码沙箱示例

<script setup>
import { useQueryClient, useQuery, useMutation } from "@tanstack/vue-query";

// 获取 QueryClient 实例
const queryClient = useQueryClient();

// 查询
const { isLoading, isError, data, error } = useQuery({
  queryKey: ["todos"],
  queryFn: getTodos,
});

// 变更
const mutation = useMutation({
  mutationFn: postTodo,
  onSuccess: () => {
    // 使查询失效并重新获取数据
    queryClient.invalidateQueries({ queryKey: ["todos"] });
  },
});

function onButtonClick() {
  mutation.mutate({
    id: Date.now(),
    title: "Do Laundry",
  });
}
</script>

<template>
  <span v-if="isLoading">加载中...</span>
  <span v-else-if="isError">错误：{{ error.message }}</span>
  <!-- 到这一步，我们可以假设 `isSuccess === true` -->
  <ul v-else>
    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
  </ul>
  <button @click="onButtonClick">添加任务</button>
</template>