umi-plugin-mst

针对 MobX 的 umi 插件，需要 umi 3.0 及以上（>= 3.0.0）版本。

提供 dva 之外的另一种选择。

umi-plugin-mst 内置：

• [email protected]
• [email protected]
• [email protected]

可以和 @umijs/plugin-dva, @umijs/plugin-model 一起使用。

在models/目录下同时存在三种类型（dva、hooks、mobx）的 model 时，不会冲突。

安装

在 umi 工程根目录下 使用 yarn 安装：

yarn add umi-plugin-mst --dev

使用

示例工程：example

目录规约

一个基础的 umi 项目目录结构:

├── package.json
└── src
+   ├── models
+       └── foo.ts
    ├── pages
        └── index.tsx
    └── app.ts

在 models/ 目录下有 types.model 时启用 umi-plugin-mst:

/**
 * @file src/models/foo.js
 */
import { types } from 'mobx-state-tree';

const Foo = types
  .model({
    bar: types.optional(types.string, ''),
  })
  .actions((self) => ({
    setBar(text: string) {
      self.bar = text;
    },
    clearBar() {
      self.bar = '';
    },
  }));

export default Foo.create({});

使用 Hooks 连接数据到视图：

/**
 * @file src/pages/index.js
 */
import React from 'react';
import { useMst, observer } from 'umi';

function Index(): JSX.Element {
  const { foo } = useMst();
  return (
    <div>
      record: {JSON.stringify(foo)}
      <input value={foo.bar} onChange={(event) => foo.setBar(event.target.value)} />
      <button onClick={foo.clearBar}>Clear</button>
    </div>
  );
}

export default observer(Index);

使用 Decorator 连接数据到视图：

/**
 * @file src/pages/home.js
 */
import React, { Component } from 'react';
import { Instance } from 'mobx-state-tree';
import { observer, inject } from 'umi';
import foo from '@/models/foo';

type FooInstance = Instance<typeof foo>;

interface IHomeProps {
  foo: FooInstance;
}

@inject('foo')
@observer
export default class Home extends Component<IHomeProps> {
  render(): JSX.Element {
    const foo = this.props.foo;
    return (
      <div>
        record: {JSON.stringify(foo)}
        <input value={foo.bar} onChange={(event) => foo.setBar(event.target.value)} />
        <button onClick={foo.clearBar}>Clear</button>
      </div>
    );
  }
}