mobx api 使用装饰器语法 mobx数据转化为js数据

安装

添加 /src/store/index.js

import {
observable,
action,
computed
} from 'mobx' class Store {
@observable state = {
title: 'Header..'
} @computed get get_header() {
return this.state.title + 'Ajanuw';
} @action.bound set_title() {
if (Math.random() > 0.5) {
this.state.title += '.'
} else {
let title = this.state.title
if (title[title.length - 1] !== '.') return;
this.state.title = title.substring(title.length - 1, 0);
}
}
}
export default new Store();

/src/App.js

import React, { Component } from 'react';
import './App.css'; import { observer } from 'mobx-react'
import store from './store/index'; const Play = observer( prop =>{
return (
<div>
<div>{ store.get_header}</div>
<button onClick={ store.set_title }>change</button>
</div>
);
}); @observer
class App extends Component {
render() {
return (
<div className="App">
<Play />
</div>
);
}
} export default App;

使用rxjs

  @action.bound change(){
of(toJS(this.state.msg))
.pipe(
map(v => v += '..')
).subscribe(v => this.state.msg = v);
}

节流

  <Button color='secondary' onClick={store.getJson('ajanuw')}>Get Json</Button>

  @action.bound getJson = name => throttle( e => {
l(name)
}, 2000);

最佳实践 RootStore

// 插入到组件树
import { Provider, inject } from "mobx-react";
import RootStore from "./store/root.store";
<Provider {...new RootStore()}>
<App />
</Provider> ---
// 创建 RootStore
import IndexStore from "./index.store";
import WelcomeStore from "./welcome.store"; class RootStore {
constructor() {
this.indexStore = new IndexStore(this);
this.welcomeStore = new WelcomeStore(this);
}
} export default RootStore; ---
// 单个 store
import { observable, action, computed } from "mobx";
const l = console.log;
class IndexStore {
constructor(rootStore) {
this.rootStore = rootStore;
}
@observable
name = "indexStore";
@action.bound
test() {
// 使用另一个store的数据
l(this.rootStore.welcomeStore.name);
}
} export default IndexStore; ---
// 使用
@inject(({ indexStore }) => ({ indexStore }))
componentWillMount() {
this.props.indexStore.test()
}

关于 action

  @action.bound
asd() {
this.a = 1;
this.s = 2;
} @action
asd = () => {
this.a = 1;
this.s = 2;
}; asd = k =>
action(() => {
this.a = 1;
this.s = 2;
});

在组件中传递 mobx的数据

const Title = observer(({ children }) => <h2>{children.title}</h2>);
<Title>{data}</Title> const Title = observer(({ children }) => <h2>{children}</h2>);
<Title>{data.title}</Title>

异步方法最好使用 runInAction

  @action.bound
async getList() {
let r = await getData();
runInAction(() => {
this.list = r;
});
}
05-11 13:05