框架集成

@aiao/rxdb-plugin-trigger 的框架适配层为 React、Angular、Vue 提供了原生响应式 hooks，各框架使用独立的 npm 包，以 @aiao/rxdb-plugin-trigger 作为 peer dependency。

React

npm

npm install @aiao/rxdb-plugin-trigger-react

Yarn

yarn add @aiao/rxdb-plugin-trigger-react

pnpm

pnpm add @aiao/rxdb-plugin-trigger-react

Bun

bun add @aiao/rxdb-plugin-trigger-react

import { useTaskTrigger, useRunHistory, useSchedules } from '@aiao/rxdb-plugin-trigger-react';

useTaskTrigger

function TaskButton() {
  const { trigger, triggerAndWait, cancel, isPending, lastRun } = useTaskTrigger(myTask, rxdb.trigger);

  return (
    <div>
      <button onClick={() => trigger({ data: 'hello' })} disabled={isPending}>
        {isPending ? '执行中...' : '触发任务'}
      </button>
      {lastRun && <p>状态: {lastRun.status}</p>}
    </div>
  );
}

useRunHistory

function RunList() {
  const { runs, isLoading, error } = useRunHistory('my-task', { limit: 20 });

  if (isLoading) return <span>加载中...</span>;
  if (error) return <span>错误: {error.message}</span>;

  return (
    <ul>
      {runs.map(run => (
        <li key={run.id}>
          {run.status} - {run.duration}ms
        </li>
      ))}
    </ul>
  );
}

useSchedules

function ScheduleManager() {
  const { schedules, isLoading, create, activate, deactivate, del } = useSchedules(rxdb.trigger, 'my-task');

  return (
    <div>
      <button onClick={() => create({ task: 'my-task', cron: '*/5 * * * *' })}>添加调度</button>
      {schedules.map(s => (
        <div key={s.id}>
          <span>
            {s.cron} ({s.active ? '活跃' : '已暂停'})
          </span>
          <button onClick={() => (s.active ? deactivate(s.id) : activate(s.id))}>{s.active ? '暂停' : '恢复'}</button>
          <button onClick={() => del(s.id)}>删除</button>
        </div>
      ))}
    </div>
  );
}

Angular

npm

npm install @aiao/rxdb-plugin-trigger-angular

Yarn

yarn add @aiao/rxdb-plugin-trigger-angular

pnpm

pnpm add @aiao/rxdb-plugin-trigger-angular

Bun

bun add @aiao/rxdb-plugin-trigger-angular

import { injectTaskTrigger, injectRunHistory, injectSchedules } from '@aiao/rxdb-plugin-trigger-angular';

injectTaskTrigger

@Component({
  template: `
    <button [disabled]="state.isPending()" (click)="onTrigger()">
      {{ state.isPending() ? '执行中...' : '触发任务' }}
    </button>
    @if (state.lastRun(); as run) {
      <p>状态: {{ run.status }}</p>
    }
  `
})
class TaskComponent {
  state = injectTaskTrigger(myTask, this.rxdb.trigger);

  onTrigger() {
    this.state.trigger({ data: 'hello' });
  }
}

所有响应式字段返回 Angular Signal（isPending: Signal<boolean>、lastRun: Signal<RunInfo | undefined>）。

injectRunHistory

@Component({
  template: `
    @if (history.isLoading()) {
      <span>加载中...</span>
    } @else {
      @for (run of history.runs(); track run.id) {
        <div>{{ run.status }} - {{ run.duration }}ms</div>
      }
    }
  `
})
class RunListComponent {
  history = injectRunHistory('my-task', { limit: 20 });
}

injectSchedules

@Component({
  template: `
    @for (s of sched.schedules(); track s.id) {
      <div>
        {{ s.cron }} ({{ s.active ? '活跃' : '已暂停' }})
        <button (click)="toggle(s)">{{ s.active ? '暂停' : '恢复' }}</button>
      </div>
    }
  `
})
class ScheduleComponent {
  sched = injectSchedules(this.rxdb.trigger);

  toggle(s: ScheduleInfo) {
    s.active ? this.sched.deactivate(s.id) : this.sched.activate(s.id);
  }
}

Vue

npm

npm install @aiao/rxdb-plugin-trigger-vue

Yarn

yarn add @aiao/rxdb-plugin-trigger-vue

pnpm

pnpm add @aiao/rxdb-plugin-trigger-vue

Bun

bun add @aiao/rxdb-plugin-trigger-vue

import { useTaskTrigger, useRunHistory, useSchedules } from '@aiao/rxdb-plugin-trigger-vue';

useTaskTrigger

<script setup>
const { trigger, triggerAndWait, cancel, isPending, lastRun } = useTaskTrigger(myTask, rxdb.trigger);
</script>

<template>
  <button @click="trigger({ data: 'hello' })" :disabled="isPending">
    {{ isPending ? '执行中...' : '触发任务' }}
  </button>
  <p v-if="lastRun">状态: {{ lastRun.status }}</p>
</template>

所有响应式字段返回 Vue Ref（isPending: Ref<boolean>、lastRun: Ref<RunInfo | undefined>）。

useRunHistory

<script setup>
const { runs, isLoading, error } = useRunHistory('my-task', { limit: 20 });
</script>

<template>
  <span v-if="isLoading">加载中...</span>
  <span v-else-if="error">错误: {{ error.message }}</span>
  <ul v-else>
    <li v-for="run in runs" :key="run.id">{{ run.status }} - {{ run.duration }}ms</li>
  </ul>
</template>

useSchedules

<script setup>
const { schedules, isLoading, create, activate, deactivate, del } = useSchedules(rxdb.trigger);
</script>

<template>
  <button @click="create({ task: 'my-task', cron: '*/5 * * * *' })">添加调度</button>
  <div v-for="s in schedules" :key="s.id">
    <span>{{ s.cron }} ({{ s.active ? '活跃' : '已暂停' }})</span>
    <button @click="s.active ? deactivate(s.id) : activate(s.id)">
      {{ s.active ? '暂停' : '恢复' }}
    </button>
    <button @click="del(s.id)">删除</button>
  </div>
</template>

API 对比

API	React	Angular	Vue
触发器	useTaskTrigger()	injectTaskTrigger()	useTaskTrigger()
运行历史	useRunHistory()	injectRunHistory()	useRunHistory()
调度管理	useSchedules()	injectSchedules()	useSchedules()
响应式类型	React state	Angular Signal	Vue Ref
导入路径	/react	/angular	/vue