import React from 'react';
import { vanex, start } from 'vanex';
import ReactDOM from 'react-dom';

const countModel = {
  name: 'countModel',
  data: {
    counts: 0,
  },
  syncs: {
    inc() {
      this.counts++;
    },
  },
};

@vanex('countModel')
class CountComponent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler() {
    // 可以调用 model 的方法触发数据改变
    this.countModel.inc();
    // 也可以直接修改 model 中的值
    // this.countModel.counts ++;
  }

  render() {
    // 可以直接通过 this.countModel 访问被 @vanex 注入的 countModel
    // 也可以通过 this.props.countModel 访问，但是除非是纯函数组件否则推荐通过 this 访问
    return (
      <button onClick={this.clickHandler}>
        Click {this.countModel.counts}
      </button>
    );
  }
}


const Comp = start({
  component: CountComponent,
  models: {
    // 注册模型
    countModel,
  },
});

ReactDOM.render(<div>
    <h2>用于开发组件</h2>
    <Comp />
  </div>, mountNode);