編輯

安裝

MobX 可以在任何 ES5 環境中運作，包括瀏覽器和 NodeJS。

React 綁定有兩種：mobx-react-lite 只支援函式元件，而 mobx-react 也支援類別元件。請根據您的使用案例，將適當的綁定附加到下面的 *Yarn* 或 *NPM* 命令中。

Yarn： yarn add mobx

NPM： npm install --save mobx

CDN： https://cdnjs.com/libraries/mobx / https://unpkg.com/mobx/dist/mobx.umd.production.min.js

轉譯設定

MobX 與裝飾器

根據您的偏好，MobX 可以使用或不使用裝飾器。目前支援傳統的實作和標準化的 TC-39 版本的裝飾器。有關如何啟用它們的更多詳細資訊，請參閱啟用裝飾器。 MobX 7 將移除對傳統裝飾器的支援，改用標準裝飾器。

使用符合規範的類別屬性轉譯

當您將 MobX 與 TypeScript 或 Babel 搭配使用，並且打算使用類別時，請務必更新您的設定，使用符合 TC-39 規範的類別欄位轉譯，因為這並非總是預設值。如果沒有這個設定，類別欄位在初始化之前無法被設為可觀察的。

  • **TypeScript**：設定編譯器選項 "useDefineForClassFields": true。
  • **Babel**：請確定您使用至少 7.12 版本，並使用以下設定
    {
    // Babel < 7.13.0
    "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]],

    // Babel >= 7.13.0 (https://babel.dev.org.tw/docs/en/assumptions)
    "plugins": [["@babel/plugin-proposal-class-properties"]],
    "assumptions": {
        "setPublicClassFields": false
    }
}

為了驗證，請將這段程式碼插入您的程式碼開頭（例如 `index.js`）

if (!new class { x }().hasOwnProperty('x')) throw new Error('Transpiler is not configured correctly');

請注意，對於 Next.js，您必須自定義 Babel而不是 TypeScript，即使您的專案設定為使用 TypeScript。

在較舊的 JavaScript 環境中使用 MobX

預設情況下，MobX 使用代理來獲得最佳效能和相容性。 然而，在較舊的 JavaScript 引擎上，`Proxy` 無法使用（請查看 Proxy 支援）。例如 Internet Explorer（Edge 之前的版本）、Node.js < 6、iOS < 10、RN 0.59 之前的 Android，或 iOS 上的 Android。

在這種情況下，MobX 可以退回到與 ES5 相容的實作方式，其運作方式幾乎相同，儘管有一些沒有 Proxy 支援的限制。您必須透過設定`useProxies`來明確啟用回退實作。

import { configure } from "mobx"

configure({ useProxies: "never" }) // Or "ifavailable".

此選項將在 MobX 7 中移除。

在其他框架 / 平台上使用 MobX

← 關於此文件MobX 的核心概念 →