Mobx的使用

我之前做的一个项目是react+mobx+ts，记录一下mobx的使用
mobx是第一次使用，随便记录一下
先说一下mobx：
mobx是一个状态管理库，他相当与在react里存的state，state是由组件自身创建的，所有权属于组件自身，在其他组件是不可以修改的，但mobx是可以在其他组件中修改的，并且简单方便。
React使用MobX提供的机制来存储和更新应用程序。

有几个需要用的文件，因为用的是ts，所以结尾是.ts
ModalStore.ts

import { observable, action } from 'mobx';

export interface ModalStoreAS {
  modalTitle: string; //定义modal弹窗的title
}

export class ModalStore implements ModalStoreAS {
  @observable  public modalTitle: ''; //初始化默认为空字符串

  @action.bound
  public setModalTitle(str: string): void {  //setModalTitle用于修改modalTitle的值
    this.modalTitle = str;
  }
}

stores.ts

import { ModalStore } from './ModalStore';
interface Stores {
	[key: string]: any;
}
export const stores: Stores = {
	ModalStore: new ModalStore(),
};

import { Provider } from 'mobx-react';
import { stores } from './stores';
import EditModal form './EditModal'
  ReactDOM.render(
	<Provider {...stores}>
		<EditModal />
	</Provider>,
	document.getElementById('root')
);

EditModal.ts

import * as React from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import { Modal, Form, Input } from 'antd';

interface Props {
	[propName: string]: any;
}
interface State {
	[propName: string]: any;
}
@inject('ModalStore')
@observer
class EditModal extends React.Component<Props, State> {
  componentDidMount() {
  	const { modalTitle，setModalTitle } = this.props.ModalStore
  	setModalTitle('form里的title名称')
  	//用setModalTitle可以修改modalTitle的值
  	//初始时modalTitle是''
  	//set后，modalTitle是'form里的title名称'
  }
	render(): JSX.Element {
		const { modalTitle } = this.props.ModalStore
		const formItemLayout = {
      		labelCol: {
        		xs: { span: 24 },
        		sm: { span: 5 },
      		},
      		wrapperCol: {
        		xs: { span: 24 },
        		sm: { span: 19 },
      		},
    	};
		return (
			<Modal
				title={'编辑弹窗'}
				visible={visible}
				cancelText={'取消'}
				okText={'确定'}
				onOk={() => {
					onConfirm(form);
				}}
				onCancel={() => {
					onCancel(form);
				}}		
			>
			<Form {...formItemLayout}>
				<Form.Item label={'名称'}>
            		{getFieldDecorator('titleName', {
           			initialValue: modalTitle,
              		rules: [
                		{
                  			pattern: /^.{1,32}$/,
                  			message: '32字符内',
                		}, 
                	{ required: true, message: '名称不能为空' },
              	],
            	})(
              		<Input placeholder={'请输入'} />
            	)}
          		</Form.Item>
			</Form>
		</Modal>
		)
	}
}
const EditModal = Form.create()(EditModal);
export default EditModal;

这是set后，modalTitle的值改变里