umbraco-global-context

Umbraco 全局上下文

这是什么？

全局上下文创建了一个共享的、类型安全的数据和函数层，可在整个后台中访问。与作用域上下文（如工作区上下文）不同，全局上下文会在整个后台会话期间持续存在。可使用它们在扩展之间共享状态、管理集中式服务，或协调通信。注意：尽可能优先使用更具体的上下文类型，Umbraco 很少使用全局上下文。

文档

实现前请务必获取最新文档：

• 主要文档：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/global-context
• 上下文 API：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/context-api
• 基础：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 扩展注册表：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

相关基础技能

• 上下文 API：了解上下文的使用模式

  • 参考技能：umbraco-context-api

• 状态管理：管理上下文中的响应式状态

  • 参考技能：umbraco-state-management

工作流

1. 获取文档 - 对上述 URL 使用 WebFetch
2. 提出问题 - 要共享哪些状态？需要哪些服务？是否可以改用工作区上下文？
3. 生成文件 - 根据最新文档创建上下文令牌、实现和清单
4. 说明 - 展示创建的内容以及如何使用该上下文

最简示例

上下文令牌（my-global-context.token.ts）

import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { MyGlobalContext } from './my-global-context.js';

export const MY_GLOBAL_CONTEXT = new UmbContextToken<MyGlobalContext>(
  'My.GlobalContext'
);

上下文实现（my-global-context.ts）

import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { MY_GLOBAL_CONTEXT } from './my-global-context.token.js';

export class MyGlobalContext extends UmbContextBase {
  #currentValue = '';

  constructor(host: UmbControllerHost) {
    super(host, MY_GLOBAL_CONTEXT);
  }

  getValue(): string {
    return this.#currentValue;
  }

  setValue(value: string): void {
    this.#currentValue = value;
  }
}

清单（umbraco-package.json）

{
  "name": "My Global Context Package",
  "extensions": [
    {
      "type": "globalContext",
      "alias": "My.GlobalContext",
      "name": "My Global Context",
      "js": "/App_Plugins/MyPackage/my-global-context.js"
    }
  ]
}

使用上下文

import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { MY_GLOBAL_CONTEXT } from './my-global-context.token.js';

class MyElement extends UmbElementMixin(LitElement) {
  #myContext?: MyGlobalContext;

  constructor() {
    super();
    this.consumeContext(MY_GLOBAL_CONTEXT, (instance) => {
      this.#myContext = instance;
    });
  }
}

就是这样！务必获取最新文档，保持示例精简，并生成完整可运行的代码。