import React from 'react';
import { vanex, start } from 'vanex';

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>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>HomePage</h1>
        <CountComponent />
      </div>
    );
  }
}

start({
  component: Home,
  container: '#mountNode',
  models: {
    // 注册模型
    countModel,
  },
});

    

        button {
  width: 100px;
  height: 100px;
}