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

const model = {
    name: 'my',

    // 数据部分
    data: {
        name: 'abc'
    },

    // 异步请求部分
    effects: {
        async getName(arg) {
            try {
                const res = await axios.get(`/user?ID=${arg}`);

                if(res.success && res.data) {
                    // set方法会自动触发UI渲染
                    this.set({
                        name: res.data.name
                    });
                }
            } catch(e) {
                alert(e.message);
            }
        }
    },
};

@vanex('my')
class Comp extends React.Component{
    constructor() {
        super(...arguments);
    }

    componentWillMount() {
        // 异步请求数据
        this.my.getName('test');
    }

    render() {
        const { name } = this.my.toJS();

        return (
            <div>
                {name}
            </div>
        );
    }
}

start({
    component: Comp,
    container: '#root', // 要渲染的父节点，不传start方法会返回一个React组件
    models: {
        my: model,
    }
});