# @adobe/lit-mobx 中文文档

规范地址：https://npmcn.com/package/%40adobe/lit-mobx/

版本：2\.2\.2
npm 元数据更新时间：2026-10-01T01:33:48.141Z
中文译文更新时间：2026-11-05T17:42:53.929Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adobe/lit-mobx
原文对照：https://npmcn.com/package/%40adobe/lit-mobx/?lang=original
项目主页：https://github.com/adobe/lit-mobx#readme
源码仓库：https://github.com/adobe/lit-mobx

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：92.6 kB，43 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：lit ^2\.0\.0 \|\| ^3\.0\.0，mobx ^5\.0\.0 \|\| ^6\.0\.0
- 首次发布：2019-09-18T22:05:26.989Z
- 最新版本发布：2024-01-02T18:02:30.745Z
- 近 30 天下载量：165998（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 0 个）

## 中文简介

把暴徒和点燃元素结合起来!

## 安装

```sh
npm install @adobe/lit-mobx
```

也可以使用：`pnpm add @adobe/lit-mobx`、`yarn add @adobe/lit-mobx`、`bun add @adobe/lit-mobx`

## README

[![Known Vulnerabilities](https://snyk.io/test/github/adobe/lit-mobx/badge.svg)](https://snyk.io/test/github/adobe/lit-mobx)

# 升- 摩尔克

混合和基础类,允许容易使用暴徒 [`lit`](https://lit.dev/)。 。 。 .

混入执行在很大程度上是基于亚历山大·魏斯在他的作品 [`mobx-lit-element`](https://github.com/alexanderweiss/mobx-lit-element) 执行。 已重写为 支持多种形式的用法(混合,或碱类),以及基于打字符来得到类型定义.

## 安装

作为依赖:

```
npm install --save @adobe/lit-mobx lit mobx
```

## LitElement 2.0 用法

这个图书馆已经更新到最新版本的Lit 我们强烈建议你更新 但是,如果您想继续使用 LitMobx ,请使用 [列表2.0](https://lit-element.polymer-project.org/guide) 然后安装1.0主要版本:

```
npm install --save @adobe/lit-mobx@^1.0.0
```

我们将会在这一重要版本中背放任何安全补丁(尽管不期望有).

## 演示

```
npm install
npm run demo
```

## 使用量

见 [Java 脚本](https://stackblitz.com/edit/lit-mobx-demo?file=index.js) 财务报告和审定财务报表 [类型脚本](https://stackblitz.com/edit/lit-mobx-typescript?file=index.ts) stackBlitz 上的例子项目。 见 [此示例](https://stackblitz.com/edit/lit-mobx-typescript-mobx6?file=index.ts) 用于在Typescript中用 Mobx v6 演示使用,而不使用装饰器.

```typescript
import { html, TemplateResult } from 'lit';
import { customElement, LitElement } from 'lit/decorators.js';
import { observable, action } from 'mobx';
import { MobxLitElement } from '@adobe/lit-mobx';

// create a mobx observable
class Counter {
    @observable
    public count = 0;

    @action
    public increment() {
        this.count++;
    }
}

// create instance that can be shared across components
const counter = new Counter();

// create a new custom element, and use the base MobxLitElement class
// alternatively you can use the MobxReactionUpdate mixin, e.g. `class MyElement extends MobxReactionUpdate(LitElement)`
@customElement('my-element')
export class MyElement extends MobxLitElement {
    private counter = counter;

    // any observables accessed in the render method will now trigger an update
    public render(): TemplateResult {
        return html`
            Count is ${this.counter.count}
            <br />
            <button @click=${this.incrementCount}>Add</button>
        `;
    }

    private incrementCount() {
        this.counter.increment();
    }
}
```

进一步的例子见 [演示文件夹](https://npmcn.com/package/%40adobe/lit-mobx/demo)。 。 。 .

注:可观测物只有在可观测物直接用于可检测物函数范围内时,才被连接用于更新可检测物函数。 这个图书馆的实施使我们有必要将渲染功能包装在 `autorun` 块来钩住这些可观测到的可重运行渲染。 如果您想要对可观察到的属性进行响应来计算在渲染函数中使用的某些其他结果,那么您需要使用普通的MobX方法来观察一个属性更改的回调或某种其他生命周期函数,来设置该观察并写入您组件中被适当装饰以驱动 Lit 常规更新周期的属性.

## 自定义反应

在一些罕见的情况下,应用程序可能需要在一个单一的app内拥有多个不同的主要版本的Mobx. 这可能导致各种问题,各地使用的"暴徒"版本需要从"暴徒"的别名版本中被特地导入,例如: `mobx 6.x` 改为 `mobx6`。 。 。 .

为了帮助支持这些案件 lit-mobx 提供自定义的执行 Mobx 反应 Update mixin, `MobxReactionUpdateCustom`,支持采取 `Reaction` 建筑师作为第二个论据。 这使得用户可以定义哪个版本的暴徒通过,并确保不会由lit-mobx导入引起副作用 `mobx` 直接说.

示例用法:

```typescript
import { MobxReactionUpdateCustom } from '@adobe/lit-mobx/lib/mixin-custom.js';

// import your specific mobx version
import { Reaction } from 'mobx6';

// and pass it to the mixin to create your own mobx lit element base class
class Mobx6LitElement extends MobxReactionUpdateCustom(LitElement, Reaction) {}
```

### 捐款

欢迎捐款! 读取 [贡献指南](https://npmcn.com/package/%40adobe/lit-mobx/.github/CONTRIBUTING.md) 更多信息.

### 许可证发放

这个项目根据Apache V2许可证获得许可. 见 [自由主义](https://npmcn.com/package/%40adobe/lit-mobx/LICENSE) 更多信息.

## 常见问题

### @adobe/lit-mobx 是什么？

把暴徒和点燃元素结合起来\!

### 如何安装 @adobe/lit-mobx？

在项目目录运行 npm install @adobe/lit-mobx，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：lit（^2\.0\.0 \|\| ^3\.0\.0）、mobx（^5\.0\.0 \|\| ^6\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adobe/lit-mobx 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adobe/lit-mobx 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @adobe/lit-mobx 可以商用吗？

@adobe/lit-mobx 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @adobe/lit-mobx 的下载量有多少？

根据 npm 官方下载统计，@adobe/lit-mobx 在 2026/10/05 – 2026/11/03 这 30 天内被下载 165,998 次，日均约 5,533 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adobe/lit-mobx 还在维护吗？

最新版本 2\.2\.2 发布于 2024/01/03（2 年前）；至今共发布 12 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/09/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。