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 展示了完整集成。

Fileoverview

RxDB Vue 集成包提供 RxDB 数据库的 Vue 3 Composition API 接口

Interfaces

Interface	Description
InfiniteScrollResource	-
RxDBResource	-

Variables

Variable	Description
injectRxDB	-
injectRxDBRef	-
provideRxDB	-

Functions

Function	Description
makeRxDBDependencyInjector	创建一组类型安全的 RxDB Vue 依赖注入函数。
useCount	Count entities matching the criteria
useCountAncestors	Count ancestor entities in a tree structure
useCountDescendants	Count descendant entities in a tree structure
useCountNeighbors	Count neighbor entities in a graph structure
useFind	Find multiple entities matching the criteria
useFindAll	Find all entities
useFindAncestors	Find all ancestor entities in a tree structure
useFindByCursor	使用游标分页查找实体
useFindDescendants	Find all descendant entities in a tree structure
useFindOne	查找匹配条件的单个实体
useFindOneOrFail	Find one entity or throw an error if not found
useGet	通过 ID 获取单个实体
useGraphNeighbors	Find neighbor entities in a graph structure
useGraphPaths	Find paths between two entities in a graph
useInfiniteScroll	用于游标分页的无限滚动钩子。
useRepositoryQuery	RxDB 仓库查询的核心钩子实现管理响应式订阅和状态更新
useRxDB	获取当前已就绪的 RxDB 实例。
useRxDBRef	获取已提供的 RxDB 响应式引用。

安装​

提供数据库​

异步初始化​

响应式查询​

无限滚动​

完整示例​

Fileoverview​

Interfaces​

Variables​

Functions​

安装