Context 上下文

在 NocoBase 中，上下文（Context） 是连接插件代码和 NocoBase 能力的桥梁。通过上下文你可以发请求、做国际化、写日志、导航页面等。

上下文有两个访问入口：

Plugin 里：this.context
React 组件里：useFlowContext()（从 @nocobase/flow-engine 导入）

这两者返回的是同一个对象（FlowEngineContext 实例），只是使用场景不同。

在 Plugin 里使用

在插件的 load() 等生命周期方法中，通过 this.context 访问：

import { Plugin } from '@nocobase/client-v2';

class MyPlugin extends Plugin {
  async load() {
    // 通过 this.context 访问上下文能力
    const { api, logger } = this.context;

    const response = await api.request({ url: 'app:getInfo' });
    logger.info('应用信息', response.data);

    // 国际化：this.t() 会自动注入插件包名作为 namespace
    console.log(this.t('Hello'));
  }
}

在组件里使用

在 React 组件中，通过 useFlowContext() 获取同一个上下文对象：

tsx

import { useFlowContext } from '@nocobase/flow-engine';

export default function MyPage() {
  const ctx = useFlowContext();

  const handleClick = async () => {
    const response = await ctx.api.request({ url: 'users:list', method: 'get' });
    console.log(response.data);
  };

  return <button onClick={handleClick}>{ctx.t('Load data')}</button>;
}

Plugin 快捷属性 vs ctx 属性

Plugin 类提供了一些快捷属性，方便在 load() 里使用。不过要注意，有些 Plugin 类的快捷属性和 ctx 上的同名属性指向不同的东西：

Plugin 快捷属性	指向	用途
`this.router`	RouterManager	注册路由，用 `.add()`
`this.pluginSettingsManager`	PluginSettingsManager	注册插件配置页（`addMenuItem` + `addPageTabItem`）
`this.flowEngine`	FlowEngine 实例	注册 FlowModel
`this.t()`	i18n.t() + 自动 ns	国际化，自动注入插件包名
`this.context`	FlowEngineContext	上下文对象，和 useFlowContext() 一致

其中最容易混淆的是 this.router 和 ctx.router：

this.router（Plugin 快捷属性）→ RouterManager，用来注册路由（.add()）
ctx.router（上下文属性）→ React Router 实例，用来页面导航（.navigate()）

// Plugin 里：注册路由
async load() {
  this.router.add('hello', {
    path: '/hello',
    componentLoader: () => import('./pages/HelloPage'),
  });
}

tsx

// 组件里：页面导航
const ctx = useFlowContext();
ctx.router.navigate('/hello'); // -> /v/hello

上下文提供的常用能力

这里列出常用的上下文能力，不过有些能力只在 Plugin 里可用，有些只在组件里可用，有些两边都有但写法不同。

能力	Plugin（`this.xxx`）	Component（`ctx.xxx`）	说明
API 请求	`this.context.api`	`ctx.api`	用法一致
国际化	`this.t()` / `this.context.t`	`ctx.t`	`this.t()` 自动注入插件 namespace
日志	`this.context.logger`	`ctx.logger`	用法一致
路由注册	`this.router.add()`	-	仅 Plugin
页面导航	-	`ctx.router.navigate()`	仅组件
路由信息	`this.context.location`	`ctx.route` / `ctx.location`	建议在组件中使用
视图管理	`this.context.viewer`	`ctx.viewer`	打开弹窗 / 抽屉等
FlowEngine	`this.flowEngine`	-	仅 Plugin

每项能力的详细用法和代码示例见常用能力。

Context 上下文

Context 上下文

在 Plugin 里使用

在组件里使用

Plugin 快捷属性 vs ctx 属性

上下文提供的常用能力

相关链接