快速入门

更新于 2026-11-02 Lit 查看英文原文 ↗

此代码片段展示了 Lit Query 的三个核心概念：

TypeScript

1import { LitElement, html } from 'lit'2import {3  QueryClient,4  QueryClientProvider,5  createMutationController,6  createQueryController,7} from '@tanstack/lit-query'8import { addTodo, getTodos } from './api'9 10const queryClient = new QueryClient()11 12class AppQueryProvider extends QueryClientProvider {13  constructor() {14    super()15    this.client = queryClient16  }17}18 19customElements.define('app-query-provider', AppQueryProvider)20 21class TodosView extends LitElement {22  private readonly todos = createQueryController(this, {23    queryKey: ['todos'],24    queryFn: getTodos,25  })26 27  private readonly createTodo = createMutationController(this, {28    mutationFn: addTodo,29    onSuccess: async () => {30      await queryClient.invalidateQueries({ queryKey: ['todos'] })31    },32  })33 34  render() {35    const query = this.todos()36    const mutation = this.createTodo()37 38    if (query.isPending) return html`Loading...`39    if (query.isError) return html`Error: ${query.error.message}`40 41    return html`42      <ul>43        ${query.data.map((todo) => html`<li>${todo.title}</li>`)}44      </ul>4546      <button47        ?disabled=${mutation.isPending}48        @click=${() => this.createTodo.mutate({ title: 'Write Lit docs' })}49      >50        Add Todo51      </button>52    `53  }54}55 56customElements.define('todos-view', TodosView)

在组件外层挂载提供者：

HTML

1<app-query-provider>2  <todos-view></todos-view>3</app-query-provider>

控制器使用 this 创建，因为 LitElement 是一种 ReactiveControllerHost。Lit Query 利用宿主组件的生命周期来订阅、请求更新，并在元素断开连接时执行清理。

如果你熟悉 React Query，请继续阅读响应式控制器与 Hook 的对比；否则可直接前往查询。