@aiao/rxdb-vue

@aiao/rxdb-vue

@aiao/rxdb-vue 把 @aiao/rxdb 的实时查询接入 Vue 3 Composition API。该包提供依赖注入、响应式查询 hooks 和游标无限滚动，不包含 UI 组件。

安装

pnpm add @aiao/rxdb @aiao/rxdb-vue rxjs vue

vue >= 3.5 与 rxjs ^7.8 是 peer dependencies。

提供数据库

在会渲染业务组件的祖先组件中调用 provideRxDB：

<script lang="ts" setup>
import { provideRxDB } from '@aiao/rxdb-vue';
import { database } from './database';
import TodoList from './TodoList.vue';

provideRxDB(database);
</script>

<template>
  <TodoList />
</template>

同步消费者可以使用：

import { injectRxDB, useRxDB } from '@aiao/rxdb-vue';

const optionalDatabase = injectRxDB(); // RxDB | undefined
const database = useRxDB(); // 缺少 provider 或当前值为空时抛错

异步初始化

provideRxDB 也接受 Ref<RxDB | undefined>。需要等待数据库就绪的消费者应使用 ref API：

import type { RxDB } from '@aiao/rxdb';
import { provideRxDB, useRxDBRef } from '@aiao/rxdb-vue';
import { shallowRef } from 'vue';

const databaseRef = shallowRef<RxDB>();
provideRxDB(databaseRef);

const database = useRxDBRef();
// database.value 在初始化完成后更新

injectRxDBRef() 是可选版本；没有 provider 时返回 undefined。useInfiniteScroll 会在 provider 存在但数据库仍为 undefined 时等待，并在 ref 就绪后自动加载。

响应式查询

实体静态查询方法返回的 Observable 会驱动 Vue 响应式资源：

import { useCount, useFind, useGet } from '@aiao/rxdb-vue';
import { Todo } from './entities/Todo';

const todo = useGet(Todo, 'todo-1');
const todos = useFind(Todo, {
  where: { combinator: 'and', rules: [] }
});
const count = useCount(Todo, {
  where: { combinator: 'and', rules: [] }
});

每个查询资源公开：

• value：最近一次成功结果；
• isLoading：首次查询或当前没有有效值时，是否仍在等待结果；
• error：标准化后的 Error | undefined；
• hasValue：当前结果是否有效；
• isEmpty：成功结果是否为空；未返回结果或错误时为 undefined。

查询参数可直接传值，也可传 Ref、ComputedRef 或 getter。getter/响应式参数变化时，旧订阅会取消并执行新查询。

基础查询 API：

• useGet
• useFindOne
• useFindOneOrFail
• useFind
• useFindByCursor
• useFindAll
• useCount

Tree API：useFindDescendants、useCountDescendants、useFindAncestors、useCountAncestors。

Graph API：useGraphNeighbors、useCountNeighbors、useGraphPaths。实体仍需安装并配置对应的 RxDB tree/graph 能力。

无限滚动

import { useInfiniteScroll } from '@aiao/rxdb-vue';
import { Todo } from './entities/Todo';

const list = useInfiniteScroll(Todo, {
  where: { combinator: 'and', rules: [] },
  orderBy: [
    { field: 'createdAt', sort: 'desc' },
    { field: 'id', sort: 'desc' }
  ],
  limit: 50
});

list.loadMore();
list.refresh();

useInfiniteScroll 返回：

• value: ComputedRef<T[]>
• isEmpty: ComputedRef<boolean>
• isLoading: Ref<boolean>
• error: Ref<Error | undefined>
• hasMore: Ref<boolean>
• loadMore() 与 refresh()

首屏在组件 mounted 后加载；后续页面自动带上上一页最后一个实体作为 after。options 或异步提供的数据库变化时，旧分页订阅会清理并从第一页重载。已加载页面的 live Observable 可以继续更新该页，但只有最新分页请求会结束全局 loading 或更新 hasMore。

完整示例

仓库中的 apps/dev-rxdb-vue 展示了完整集成。