[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> ); ~~~