createMutationController
TypeScript
1function createMutationController<TData = unknown, TError = Error, TVariables = void, TOnMutateResult = unknown>(2 host: ReactiveControllerHost,3 options: Accessor<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>>,4 queryClient?: QueryClient5): MutationResultAccessor<TData, TError, TVariables, TOnMutateResult>;定义位置：packages/lit-query/src/createMutationController.ts:326
创建一个 Lit 响应式控制器，使宿主组件订阅一个修改（mutation）。
返回的访问器（accessor）既可调用，也暴露 current、mutate、mutateAsync、reset 和 destroy。当 options 是一个函数时，它会在宿主更新期间被重新读取，从而使修改选项能够响应宿主的响应式状态。
如果省略 queryClient，该控制器将从最近连接的 QueryClientProvider 中解析查询客户端（QueryClient）。
类型参数
TData
TData = unknown
TError
TError = Error
TVariables
TVariables = void
TOnMutateResult
TOnMutateResult = unknown
参数
host
ReactiveControllerHost
拥有该修改订阅的 Lit 响应式控制器宿主。
options
Accessor<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>>
修改观察者选项，或一个返回该选项的 getter 函数。
options 的属性
基于 MutationObserverOptions 构建。参见上方类型定义以了解其影响范围。
queryClient?
可选的显式查询客户端。为那些不应从 Lit 上下文中解析查询客户端的控制器提供此参数。
返回值
MutationResultAccessor<TData, TError, TVariables, TOnMutateResult>
一个用于获取最新修改结果的访问器，并附带修改辅助方法。
示例
TypeScript
1import { LitElement, html } from 'lit'2import { createMutationController } from '@tanstack/lit-query'3 4class AddTodoForm extends LitElement {5 private readonly addTodo = createMutationController(this, {6 mutationFn: (title: string) =>7 fetch('/api/todos', { method: 'POST', body: JSON.stringify({ title }) }),8 })9 10 render() {11 const mutation = this.addTodo()12 13 return html`14 <button ?disabled=${mutation.isPending} @click=${() => this.addTodo.mutate('Ship docs')}>15 Add todo16 </button>17 `18 }19}