跳到主要内容

Vue 使用

Vue 项目里接 TanStack Query，核心思路和 React 一样：请求层继续做请求，Query 层负责服务端状态。

安装和接入​

npm install @tanstack/vue-query
import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'
import { createApp } from 'vue'
import App from './App.vue'

const queryClient = new QueryClient()

createApp(App).use(VueQueryPlugin, { queryClient }).mount('#app')

基本查询​

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'

const { data, isLoading, error } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
})
</script>

带参数的查询​

<script setup lang="ts">
import { computed } from 'vue'
import { useQuery } from '@tanstack/vue-query'

const props = defineProps<{ id?: string }>()

const enabled = computed(() => !!props.id)

const { data } = useQuery({
  queryKey: ['todo', props.id],
  queryFn: () => fetchTodoById(props.id!),
  enabled,
})
</script>

修改数据​

<script setup lang="ts">
import { useMutation, useQueryClient } from '@tanstack/vue-query'

const queryClient = useQueryClient()

const { mutate } = useMutation({
  mutationFn: createTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})
</script>

Vue 项目里更常见的组织方式​

  • api/*.ts：请求函数
  • composables/query/*.ts：Query hooks
  • 页面组件只消费 composable

这样一层层分开之后，页面逻辑会清楚很多。