Mobx

---

title: Mobx
tags:

• Mobx

---

Mobx

mobox 核心库
mobox-react
@babel/plugin-proposal-decorators

yarn add mobx mobx-react @babel/plugin-proposal-decorators

在babel.config.js添加以下配置

plugins:[

	['@babel/plugin-proposal-decorators',{'legacy':true}]

]

新建文件 mobx\index.js用来存放全局数据

import {observable,action} from 'mobx';

calss Roottore{

	//observable 表示数据可监控 表示是全局数据

 	@observable name = 'hello';

	// action 行为表示 changeName是个可以全局共享数据的方法
  @action
  changeName(name){
  this.name = name ;
  }
}

export defaule new RootStore();

在根组件中挂载

import React from 'react';
import {View} from 'react-native';
import RootStore from './mobx';
import {Provider} from 'mobx-react';

class App extends React.Component{
  //正常
  render(){
    return（）
      <View>
        <Provider RootStore={RootStore}>
          //写在provider里的组件才能拿到全局数据
          <Sub1></Sub1>

        </Provider>
      </View>
  }
}

export default App

其他组件中使用，获取，修改

import React from 'react';
import {View,Text} from 'react-native';
import {inject,observer} from 'mobx-react';

@inject('RootStore') //注入 用来获取 全局数据的
@observer
class Sub1 extends React.Component{
  changeName =() =>{
    this.props.RootStore.changeName('八戒');
  }
  render(){
    console.log(this);
    return(
      <View>
        <Text onPress={this.changeName}>{this.props.rootStore.name}</Text>
      </View>
    )
  }
}

export default Sub1;

修改全局数据