数据 provider ​

静态数组和 API 函数可直接用;URL 请求和字典来源需要宿主注入 AsamDataProvider。provider 接口、请求上下文及错误类型由 @asam-ui/ui 导出。核心包不自带 HTTP 客户端、认证、业务缓存或自动重试。

ts
import { provideAsamData } from '@asam-ui/ui';
import type { App } from 'vue';
import type { AsamDataProvider } from '@asam-ui/ui';

export function installAsamData(app: App, provider: AsamDataProvider) {
	provideAsamData(app, provider, { scope: 'session-0' });
}

在芋道宿主中使用 createYudaoProvider 包装现有请求和字典 store;请求适配必须把 context.signal 传给传输层。provider 的 request 返回已解包列表/分页或一层芋道 data envelope。宿主负责凭据、错误通知和字典持久缓存,避免把它们塞进通用包。

选择数据源 ​

  • 静态:AsamSelect 接收标准化 options;defineAsamOptions().static(...) 可处理自定义字段。
  • API 函数:defineAsamOptions<Value, Item>().api({ api, params, transform, fieldNames });transform 同步执行。
  • URL:AsamRemoteSelect 的 request 或工厂 request(...) 通过已注入的 provider 执行。
  • 字典:AsamDictSelect 的 dictType 或 defineAsamDictSource(...) 通过 provider 的 dict.get 读取。
vue
<template>
	<AsamRemoteSelect v-model="status" :request="{ url: '/status/options' }" />
	<AsamDictSelect v-model="category" dict-type="category" />
</template>

先在 数据驱动/AsamRemoteSelect 查看成功、空结果、延迟、首次失败、重试和旧结果过期示例,再看 数据驱动/AsamDictSelect 的字典示例。失败刷新保留上次成功选项并显示“已过期”;首次失败为空。reload({ force: true }) 显式强刷。默认没有远程缓存;需要时传 cache: { ttlMs, key? }。字典强刷要求 provider 提供 dict.refresh。

两个异步选择组件的模板 ref 可按包导出的 AsamAsyncSelectExpose 标注,提供 reload、cancel、focus、blur。AsamSelectExpose 仅提供 focus、blur;AsamTableExpose 与 AsamFormExpose<Model> 则各有独立方法集合。方法签名以包类型为准。

Storybook 全局 provider 仅使用本地确定性假数据,不接真实后端。切换登录或租户边界时由宿主调用 setAsamDataScope(app, newScope),清理旧上下文;scope 不应包含 token 或个人数据。


内容来源:apps/docs/src/guides/DataProvider.mdx。本页由同源指南生成;组件 Demo 与 API 从 组件目录 查看。

搜索文档

Tab 选择结果 Enter 打开 Esc 关闭