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

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

// 直接用 vanex 包裹一层
const CountComp = vanex('countModel')(({ countModel }) => {
  return <button onClick={e => countModel.inc()}>
    Click {countModel.counts}
  </button>
});

// 由于不支持直接在函数上使用注解，但是对象的方法可以
// 如果要在纯函数组件上使用注解，可以使用下面的方式
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 Home = () => <div>
	<h1>纯函数组件</h1>
  <CountComp />
  <CountComponent />
  <div>
  	<Pures.CountComponent/>
    <Pures.Title/>
  </div>
</div>;

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

    

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