computed get method

src/components/ElementGroup.js

@@ -8,19 +8,19 @@ import { observer, inject } from 'mobx-react';
 @autobind
 export default class ElementGroup extends React.Component {
   cloneElement(element) {
-    this.store().cloneElement(element)
+    this.store.cloneElement(element)
   }
 
   deleteElement(element) {
-    this.store().deleteElement(element)
+    this.store.deleteElement(element)
   }
 
   // 返回element的index为-1, 删除最后一个元素
   deleteLastElement() {
-    this.store().deleteLastElement()
+    this.store.deleteLastElement()
   }
 
-  store() {
+  get store() {
     return this.props.elementGroupStore
   }
 
@@ -31,7 +31,7 @@ export default class ElementGroup extends React.Component {
   render() {
     return (
       <div>
-        {this.store().elements.map(element =>
+        {this.store.elements.map(element =>
           (<Element
             meta_element={ element }
             key={ "key_" + element.id }

src/components/Header.js

 import React from 'react'
 import ModalRepoForm from './ModalRepoForm'
-import Loader from 'halogen/PulseLoader'
-import { Link } from 'react-router-dom'
 import { observer, inject } from 'mobx-react';
 import autobind from 'autobind-decorator'
 
 @autobind
 @inject(["headerStore"]) @observer
 export default class Header extends React.Component {
+  get store() {
+    return this.props.headerStore
+  }
   componentDidMount() {
-    this.props.headerStore.loadHeaderData()
+    this.store.loadHeaderData()
   }
 
   addRepo(repo) {
-    this.props.headerStore.addRepo(repo)
+    this.store.addRepo(repo)
   }
 
   render() {
-    const { headerStore } = this.props;
-
-    let result = null;
-
-    if (headerStore.loading) {
-      result = <Loader color="#286090" size="12px" margin="4px"/>;
-    }
-    else if (headerStore.error !== null) {
-      result = <span>Error: {headerStore.error}</span>;
-    }
-    else {
-      const data = headerStore.data.map((repo) => {
-        const url = `/web/regional_design/${repo.id}?object=repo`
-        return (
-          <Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
-        )
-      })
-
-      result = data;
-    }
-
     return (
       <div className="text-left top-header">
         <ModalRepoForm handleNewRepo={ this.addRepo } />
         <div className='col-md-10'>
-          { result }
+          { this.store.showElements }
         </div>
         <div className="clearfix"></div>
       </div>

src/components/ModalRepoForm.js

@@ -8,24 +8,24 @@ import { observer, inject } from 'mobx-react';
 @observer
 @autobind
 export default class ModalRepoForm extends React.Component {
-  store() {
+  get store() {
     return this.props.modalRepoFormStore
   }
 
   close() {
-    this.store().close();
+    this.store.close();
   }
 
   open() {
-    this.store().open();
+    this.store.open();
   }
 
   handleChange(e) {
-    this.store().handleChange(e);
+    this.store.handleChange(e);
   }
 
   save(e) {
-    this.store().save(e, this.refs.name, this.props.headerStore)
+    this.store.save(e, this.refs.name, this.props.headerStore)
   }
 
   render() {
@@ -39,7 +39,7 @@ export default class ModalRepoForm extends React.Component {
           新建仓库
         </Button>
 
-        <Modal backdrop='static' show={this.store().showModal} onHide={this.close}>
+        <Modal backdrop='static' show={this.store.showModal} onHide={this.close}>
           <Modal.Header closeButton>
             <Modal.Title>新建仓库</Modal.Title>
           </Modal.Header>
@@ -47,9 +47,9 @@ export default class ModalRepoForm extends React.Component {
             <form className='form-horizontal'>
               <label htmlFor="formHorizontalName" className="col-sm-2 control-label">仓库名</label>
               <div className="col-sm-5">
-                <input autoFocus type="text" id="formHorizontalName" className="form-control" ref='name' value={ this.store().name } onChange={ this.handleChange } />
+                <input autoFocus type="text" id="formHorizontalName" className="form-control" ref='name' value={ this.store.name } onChange={ this.handleChange } />
                 {function(){
-                  if (this.store().showNameError) {
+                  if (this.store.showNameError) {
                     return <p className="text-danger">仓库名不能为空</p>
                   }
                 }.call(this)}

src/stores/Header.js

-import { observable, useStrict, action, runInAction } from 'mobx'
+import { observable, useStrict, action, runInAction, computed } from 'mobx'
+import React from 'react'
+import Loader from 'halogen/PulseLoader'
+import { Link } from 'react-router-dom'
 import $ from 'jquery'
 
 useStrict(true)
@@ -27,6 +30,29 @@ class HeaderStore {
         })
     })
   }
+
+  @computed get showElements() {
+    let result = null;
+
+    if (this.loading) {
+      result = <Loader color="#286090" size="12px" margin="4px"/>;
+    }
+    else if (this.error !== null) {
+      result = <span>Error: {this.error}</span>;
+    }
+    else {
+      const data = this.data.map((repo) => {
+        const url = `/web/regional_design/${repo.id}?object=repo`
+        return (
+          <Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
+        )
+      })
+
+      result = data;
+    }
+
+    return result
+  }
 }
 
 export default new HeaderStore()