1. 新建store目录
src
store
home
index.js
car
index.js
index.js
2. 在入口文件中 使用 Provider
import store from './store'
import { Provider } from 'mobx-react'
ReactDOM.render(
<Provider store = {store}>
<Show />
</Provider>
, document.getElementById('root'));
3. 哪个组件使用 ， 就在哪个组件中 "注入" inject
import {inject} from 'mobx-react'
<!-- @inject(string) -->
@inject('store')
4. 打造mobx 数据包
import {
observable, computed,action
} from 'mobx'
class Home {
@observable //监听 age
age = 18
@computed //当age发生改变时， 自动触发
get doubleAge(){
return this.age *= 2
}
@action // 用户操作 事件调用
increment(){
this.props.store.home.age ++
console.log( this.props.store.home.age )
//数据请求
fetch('/data/data.json')
.then(res => res.json())
.then( result => console.log( result ))
.catch( error => console.log( error ))
}
}
const home = new Home()
export default home
5. 打造store
store/index.js
import home from './home'
const store = {
//实例
home
}
export default store
6. 组件内使用数据
this.props.store.xxx 可以拿到数据
注意：
1. this.porps里面没有找到 @action 装饰器定义的方法， 但是可以直接使用，
2. this会丢失
this.props.store.home.increment.bind(this)
7. 在你要使用store的组件上记得做观察
```javascript
import { observer } from 'mobx-react'
@observer
class Mine extends Component{
}
```
