umi-plugin-mobx-store
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.3 • Public • Published

    umi-plugin-mobx-store

    The umi plugin for mobx-react.

    You can use it instead of dva, or use it with @umijs/plugin-dva and @umijs/plugin-model.

    These three types of models(dva, hooks, mobx) can coexist in the models/ directory.

    Install

    npm install umi-plugin-mobx-store --dev

    Usage

    Visit here to see the whole example

    Create a model file and use the standard mobx syntax to define your models under models/ dir:

    /**
     * @file models/foo.ts
     */
    import {observable,action} from "mobx";
     
    class Foo {
      @observable bar = '';
     
      @action
      setBar(text) {
        this.bar = text;
      }
     
      @action
      clearBar() {
        this.bar = '';
      }
    }
     
    export default new Foo();
     

    Using mobx-react with React Hooks (recommended):

    /**
     * @file pages/index.tsx
     */
    import React from 'react';
    import { userMobxStore, observer } from 'umi';
     
    function Index(): JSX.Element {
      const { foo } = userMobxStore(); // the property name is same as model file's basename.
      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);

    Using mobx-react with Decorator:

    /**
     * @file pages/home.tsx
     */
    import React, { Component } from 'react';
    import { observer, inject } from 'umi';
    import foo from '@/models/foo';
     
    @inject('foo') // the property name is same as model file's basename.
    @observer
    export default class Home extends Component {
      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>
        );
      }
    }

    Install

    npm i umi-plugin-mobx-store

    DownloadsWeekly Downloads

    12

    Version

    0.9.3

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • melthaw