useMutationState | TanStack Query Vue Docs

useMutationState

useMutationState 是一个钩子，可让您访问 MutationCache 中的所有变更。您可以向其传递 filters 以缩小变更范围，并传递 select 以转换变更状态。

示例 1：获取所有正在运行的变更的所有变量

tsx

import { useMutationState } from '@tanstack/vue-query'

const variables = useMutationState({
  filters: { status: 'pending' },
  select: (mutation) => mutation.state.variables,
})

import { useMutationState } from '@tanstack/vue-query'

const variables = useMutationState({
  filters: { status: 'pending' },
  select: (mutation) => mutation.state.variables,
})

示例 2：通过 mutationKey 获取特定变更的所有数据

tsx

import { useMutation, useMutationState } from '@tanstack/vue-query'

const mutationKey = ['posts']

// 我们要获取其状态的某个变更
const mutation = useMutation({
  mutationKey,
  mutationFn: (newPost) => {
    return axios.post('/posts', newPost)
  },
})

const data = useMutationState({
  // 此变更键需要与给定变更的变更键匹配（参见上文）
  filters: { mutationKey },
  select: (mutation) => mutation.state.data,
})

import { useMutation, useMutationState } from '@tanstack/vue-query'

const mutationKey = ['posts']

// 我们要获取其状态的某个变更
const mutation = useMutation({
  mutationKey,
  mutationFn: (newPost) => {
    return axios.post('/posts', newPost)
  },
})

const data = useMutationState({
  // 此变更键需要与给定变更的变更键匹配（参见上文）
  filters: { mutationKey },
  select: (mutation) => mutation.state.data,
})

示例 3：通过 mutationKey 访问最新的变更数据 每次调用 mutate 都会向变更缓存中添加一个新条目，持续时间为 gcTime 毫秒。

要访问最新的调用，您可以检查 useMutationState 返回的最后一项。

tsx

import { useMutation, useMutationState } from '@tanstack/vue-query'

const mutationKey = ['posts']

// 我们要获取其状态的某个变更
const mutation = useMutation({
  mutationKey,
  mutationFn: (newPost) => {
    return axios.post('/posts', newPost)
  },
})

const data = useMutationState({
  // 此变更键需要与给定变更的变更键匹配（参见上文）
  filters: { mutationKey },
  select: (mutation) => mutation.state.data,
})

// 最新的变更数据
const latest = data[data.length - 1]

import { useMutation, useMutationState } from '@tanstack/vue-query'

const mutationKey = ['posts']

// 我们要获取其状态的某个变更
const mutation = useMutation({
  mutationKey,
  mutationFn: (newPost) => {
    return axios.post('/posts', newPost)
  },
})

const data = useMutationState({
  // 此变更键需要与给定变更的变更键匹配（参见上文）
  filters: { mutationKey },
  select: (mutation) => mutation.state.data,
})

// 最新的变更数据
const latest = data[data.length - 1]

选项

options
- filters?: MutationFilters：变更过滤器
- select?: (mutation: Mutation) => TResult
  - 使用此选项转换变��状态。
queryClient?: QueryClient,
- 使用此选项可使用自定义 QueryClient。否则，将使用最近上下文中的 QueryClient。

返回值

Array<TResult>
- 将是 select 为每个匹配的变更返回的内容的数组。