[TOC] ### 1. 总结 > 主要是面向对象的思想，把所有的store用一个类进行管理 ### 2. @action和@ action.bound的区别[相关介绍](https://www.jb51.cc/js/429249.html) > bound表示改变函数this指向，和箭头函数用法相同，如果store中的类里面的方法使用 @action这表示是一个类的内部函数，外部是调不到的，如果使用@ action.bound的话this就指向调用着，此时是可以调到类中定义为@ action.bound的方法的 ### 3. store之间状态共享 > (store之间不同的类之间定义的@action.bound方法是通用的使用方法是，通过构造器解构获取不通store中的方法，然后把参数传过去，注意在/store/index里面的store类的示例的引用顺序 ~~~ constructor(rootStore) { this.rootStore = rootStore; } @action.bound queryProductAndManager = async queryContent => { const { initRequestStore } = this.rootStore || {}; const { managerCode, method } = initRequestStore || {}; method(managerCode); }); ~~~ ### 4. 页面获取其他store数据（类似于connect的作用） ~~~ // 搜索跳转详情组件 import React, { PureComponent } from '@alipay/bigfish/react'; import { Input, AutoComplete } from '@alipay/bigfish/antd'; import { Provider, inject, observer } from 'mobx-react'; import { openUrl } from '../../util/openUrl'; import store from '../../page/Index/store'; import styles from './index.less'; import { debounce } from 'lodash'; @inject(({ rootStore }) => ({ rootStore, })) @observer class AntKnowSearch extends PureComponent { constructor(props) { super(props); this.selectFundCode = null; // 当前选中的产品 } // 搜索 _handleSearch = val => { if (!val || !val.trim()) { return; } const { rootStore } = this.props; rootStore?.queryProductAndManager(val); // rootStore.queryProduct(val); } handleSearch = debounce(this._handleSearch, 300); // 打开页面 handleSelect = val => { const valArr = val.split(','); if (!Array.isArray(valArr) || !val || !val.trim()) { return; } if (valArr[1] === 'fund') { openUrl({ url: '/showRoom', query: { fundCode: valArr[0], }, openNew: true, }); } else if (valArr[1] === 'manager') { openUrl({ url: '/a/Detail', query: { Code: valArr[0], Name: valArr[2], }, openNew: true, }); } } // 点击搜索按钮 onSearchButtonClick = val => { if (!this.selectFundCode) { // 没有选中项，执行搜索操作 this.handleSearch(val); return; } // 有选中项，执行跳转操作 this.handleSelect(this.selectFundCode); } render() { const { rootStore } = this.props; // const { autoCompleteDataSource=[] } = rootStore; return ( <div className={styles.searchWrap}> <Input.Group> <AutoComplete size="large" dataSource={rootStore?.autoCompleteDataSource || []} style={{ width: '100%' }} onChange={() => { this.selectFundCode = null; }} onSelect={value => { this.selectFundCode = value; this.handleSelect(value); }} onSearch={value => this.handleSearch(value)} placeholder="" > <Input.Search enterButton size="large" onSearch={value => this.onSearchButtonClick(value)} /> </AutoComplete> </Input.Group> </div> ); } } // 相当于使用connect的效果 export default () => ( <Provider rootStore={store}> <AntKnowSearch /> </Provider> ); ~~~