#Context

In NocoBase ist der Context (Kontext) die Brücke zwischen Plugin-Code und den Fähigkeiten von NocoBase. Über den Kontext können Sie Anfragen senden, Internationalisierung durchführen, Logs schreiben, zwischen Seiten navigieren und mehr.

Der Kontext hat zwei Zugriffspunkte:

• In Plugins: this.context
• In React Components: useFlowContext() (Import aus @nocobase/flow-engine)

Beide geben dasselbe Objekt zurück (eine Instanz von FlowEngineContext), unterscheiden sich nur im Verwendungsszenario.

#Verwendung in einem Plugin

In Lebenszyklus-Methoden wie load() greifen Sie über this.context darauf zu:

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

class MyPlugin extends Plugin {
  async load() {
    // Über this.context auf die Kontextfähigkeiten zugreifen
    const { api, logger } = this.context;

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

    // Internationalisierung: this.t() fügt automatisch den Plugin-Paketnamen als Namespace ein
    console.log(this.t('Hello'));
  }
}

#Verwendung in einem Component

In React Components erhalten Sie dasselbe Kontext-Objekt über useFlowContext():

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-Shortcut-Eigenschaften vs ctx-Eigenschaften

Die Plugin-Klasse stellt einige Shortcut-Eigenschaften bereit, die in load() praktisch sind. Beachten Sie jedoch: Manche Shortcut-Eigenschaften der Plugin-Klasse und gleichnamige Eigenschaften auf ctx zeigen auf unterschiedliche Dinge:

Am leichtesten zu verwechseln sind this.router und ctx.router:

• this.router (Plugin-Shortcut) → RouterManager, dient zum Registrieren von Routen (.add())
• ctx.router (Kontext-Eigenschaft) → React-Router-Instanz, dient zur Seitennavigation (.navigate())

// Im Plugin: Route registrieren
async load() {
  this.router.add('hello', {
    path: '/hello',
    componentLoader: () => import('./pages/HelloPage'),
  });
}

// Im Component: zur Seite navigieren
const ctx = useFlowContext();
ctx.router.navigate('/hello'); // -> /v/hello

#Häufig verwendete Fähigkeiten des Kontexts

Hier eine Liste der häufig verwendeten Kontextfähigkeiten. Beachten Sie: Manche sind nur im Plugin verfügbar, manche nur im Component, manche in beiden, aber mit unterschiedlicher Schreibweise.

Detaillierte Verwendung und Codebeispiele für jede Fähigkeit siehe Häufige Fähigkeiten.

#Verwandte Links

• Häufige Fähigkeiten — Detaillierte Verwendung von ctx.api, ctx.t, ctx.logger usw.
• Plugin — Plugin-Einstiegspunkt und Shortcut-Eigenschaften
• Component-Entwicklung — Grundlegende Verwendung von useFlowContext im Component