mobx 简单使用

mobx中文文档： https://cn.mobx.js.org/

　　

安装： 

npm install mobx --save
npm install mobx-react --save

　　

下面写了个简单的案例demo。

1、在入口文件写配置

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react'    //
import store from '@/store'                   //
import Router from './router';  

ReactDOM.render(
  <Provider {...store}>    //这里注入你所需要的页面
      <Router />
  </Provider>,
  document.getElementById('root')
)
    

　　

2、在store里建立了一个home页面。

import { observable, action } from "mobx";
import { get } from '@/utils/request' 
import api from '@/services/api'

class Store {
  @observable name = '铁柱'
  @observable data = []

  // 请求数据
  @action async fetch () {
    const res = await get(api.getuser)
    
    if(res.status == 200){
      this.data = res.users
    }
  }
  // 修改name值
  @action setName (option) {
    this.name = option
  }
}

const homeStore = new Store()

export default homeStore

　　

3、在store里建立了一个index页面。

import homeStore  from './home'

export default {
  homeStore
}

　　

4、home页面

import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'

export default 
@inject('homeStore') //你需要那个页面的mobx 就写那个，这个名字对应上面导出的名字
@observer
class extends Component {
  // 初始化数据
  componentDidMount () {
    this.props.homeStore.fetch()
  }

  // 修改name值
  editName = () => {
    this.props.homeStore.setName('小白')
  }
  render() {
    const { data, name } = this.props.homeStore

    return (
      <div className='page-home'>
        { name }
        <button onClick={this.editName}>修改name值</button>
        <div>
          {JSON.stringify(data)}
        </div>
      </div>
    )
  }
}