react的mock使用方法记录

通常图方便的话,在app.js使用provide注入

import { Provider } from 'mobx-react';
import store from './store';
 <Provider store={new store()}>
        <RootRoute/>
      </Provider>

之后只要在想要使用的页面使用inject

import {inject,observer} from 'mobx-react';
@inject((stores) => {
    return {
        movieStore: stores.store.movieStore
    }
})

@observer class MobileContent extends React.Component {
 componentWillMount = () => {
    }
changeName = (e) =>{
      const  {movieStore} = this.props;
      movieStore.setValue("movieList",'chou')
    }
        render() {
            const {movieStore} = this.props
            console.log(movieStore)
      return(
          <div>{movieStore.movieList}</div>
)
}

就可以在this.props中打印看到了,可以在多个页面调用,实现一个组件改变数据,另一个组件获得更新

另外一种是只在需要使用的组件注入mock

import vm from '../../mock'
<MobileHeader vm={vm}/>
<MobileContent vm={vm}/>

组件里就可以不用inject,就可以直接在this.props里打印出vm

几个常用的mock的api:
首先是在store里面创建 观察的数据observable和计算属性computed

  @observable array = [];
  @observable obj = {};
  @observable map = new Map();
 
  @observable string = 'hello';
  @observable number = 20;
@computed get mixed() {
    return store.string + ':' + store.number;
  }

另外是修改store的数据,虽然mock可以直接修改,但是还是建议使用action

 @action bar() {
    store.string = 'word';
    store.number = 333;
    store.bool = true;
  }

完整的一个例子

// store.js
import {observable, computed, action} from "mobx";
 
class Todo {
  id = Math.random();
  @observable title = '';
  @observable finished = false;
 
  constructor(title) {
    this.title = title;
  }
 
  @action.bound toggle() {
    this.finished = !this.finished;
  }
 
}
 
class Store {
  @observable todos = [];
 
  @action.bound createTodo(title) {
    this.todos.unshift(new Todo(title))
  }
 
  @action.bound removeTode(todo) {
    // remove不是原生的方法，是mobx提供的
    this.todos.remove(todo);
  }
 
  @computed get left() {
    return this.todos.filter(item => !item.finished).length;
  }
}
 
var store = new Store();
 
 
export default store

通常使用@action.bound方便用来绑定使用this