使用函数注入

使用 vanex 函数包裹纯函数组件，即可在纯函数组件的 props 中注入相应的 model

import { vanex } from 'vanex';
const CountComp = vanex('countModel')(({ countModel }) => {
  return <button onClick={e => countModel.inc()}>
    Click {countModel.counts}
  </button>
});

使用注解

由于注解暂时不支持在函数上使用，但是支持对对象的方法使用注解，所以也可以用下面的方法对纯函数组件使用 @vanex 注解

import { vanex } from 'vanex';

const { CountComponent } = {
  @vanex('countModel')
  CountComponent({ countModel }) {
      return <button onClick={e => countModel.inc()}>
        Click {countModel.counts}
    </button>
  }
};

也可以把一堆纯函数组件写在一起：

const Pures = {
  @vanex('countModel')
  CountComponent({ countModel }) {
      return <button onClick={e => countModel.inc()}>
        Click {countModel.counts}
    </button>
  },

  @vanex('countModel')
    Title({ countModel }) {
    return <h1>{countModel.counts}</h1>
  }
}

const Combine = () => <div>
  <Pures.CountComponent />
  <Pures.Title />
</div>;

实例

下面是使用纯函数组件的例子：