中文文档:https://suprise.gitbooks.io/mobx-cn/content/refguide/api.html
安装 Mobx
cnpm install mobx -S
cnpm install mobx-react -S
使用两个 Babel 插件,支持ES6装饰器语法
cnpm install @babel/plugin-proposal-decorators -D
cnpm install @babel/plugin-proposal-class-properties -D
在 package.json / babel相关配置如下:
"babel": {
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
如果开启了eslint就添加eslintConfig:
"parserOptions": {
"ecmaFeatures": {
"legacyDecorators": true
}
}
项目下创建store/index.js (一般以页面名称命名,一个页面一个状态文件):
import {
observable,
action,
computed
} from 'mobx'
import moment from 'moment'
class AppStore {
@observable time = '2019'
@observable todos = []
@computed get desc() {
return `${this.time} 还有 ${this.todos.length} 条任务待完成`
}
@action addTodo(todo) {
this.todos.push(todo)
}
@action deleteTodo() {
this.todos.pop()
}
@action resetTodo() {
this.todos = []
}
@action getNow() {
this.time = moment().format('YYYY-MM-DD HH:mm:ss')
}
}
const store = new AppStore()
setInterval(()=>{
store.getNow()
}, 1000)
export default store
在main.js(配置最外层组件的地方)传入store:
import React from 'react'
import { Provider } from 'mobx-react'
import store from './store'
import Home from './pages/home'
function App() {
return (
<div>
<Provider store={store}>
<Home></Home>
</Provider>
</div>
);
}
export default App;
页面组件中使用:
import React from 'react'
import {
inject,
observer
} from 'mobx-react'
import './style.css'
@inject ('store') @observer
export default class Home extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
handleTodos(type) {
let { store } = this.props
switch (type) {
case 'add':
store.addTodo('一条新任务')
break;
case 'delete':
store.deleteTodo()
break;
case 'reset':
store.resetTodo()
break;
default:
}
}
render() {
let { store } = this.props
return(
<div className='home'>
<h1>在React中使用mobx</h1>
<div>{store.desc}</div>
<button onClick={this.handleTodos.bind(this,'add')}>添加一条任务</button>
<button onClick={this.handleTodos.bind(this,'delete')}>删除一条任务</button>
<button onClick={this.handleTodos.bind(this,'reset')}>任务重置</button>
{
store.todos.map((ele,index,arr) => {
return(
<div key={index}>{ele}</div>
)
})
}
</div>
)
}
}