很简单的mobx状态管理工具

标签：NPU   plugins   inpu   this   width   return   The   class   文件   

mobx是一个状态管理系统，从mobx引入observable和action；

store页面的observable是定义数据的东西，action是执行者；类似于redux

在app页面需要引入import {Provider} from "mobx-react"，利用Provider的机制来给子传值

home页面的observer是一个类似于监听者，类似于redux里面的reducers，inject引入的是store

　　通过@inject（‘store’）引入store

　　　　　@observer来监听组件里面的变化

一、安装

1、init创建项目版本0.59.9

2、npm i mobx@5.9.4 @mobx-react@5.4.3 --save    （@babel/core版本为7.4.0）

3、配置装饰器yarn add  @babel/plugin-proposal-decorators --save

　　然后需要在babel.config.js文件中添加如下代码

"plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
二、创建文件
　　src{
　　appstore/index.js
　　pages/home.js
}
三、文件中书写
1、appstore.js中的书写

import {observable,action} from ‘mobx‘;
let appStore = observable({
    counter: 0,
    str:"荆国瑞",
    list:["as"]
});
appStore.addCount = action(()=>{
    appStore.counter+=1;
});
appStore.subCount = action(()=>{
    if(appStore.counter<=0){
        return;
    }
    appStore.counter-=1;
});
appStore.changeCount = action((key)=>{
    if(key<=0){
        appStore.counter=0;
    }
    appStore.counter=parseInt(key);
});
appStore.changeStr = action((key)=>{
    if(!key)return
    appStore.str=key
});

appStore.clickhand=action(()=>{
    appStore.list.push(appStore.str)
    appStore.str=""
})
export default appStore
2、home文件中的书写
　　

import React, {Component} from ‘react‘;
import { StyleSheet, Text, View,TouchableOpacity,TextInput,Button,Alert} from ‘react-native‘;
import {observer, inject} from ‘mobx-react‘;

@inject(‘store‘)
@observer
export default class Home extends Component{
    constructor(props){
        super(props);
        this.state={
            value:0,
            str:"荆国瑞"
        }
    }
    componentWillMount(){
        console.log(this.props.store.counter)
    }
    sub=()=>{
        let {store}=this.props;
        store.subCount()
    }
    add=()=>{
        let {store}=this.props;
        store.addCount()
    }
    changehand=(e)=>{
        let {store} = this.props
        store.changeStr(e)
    }
    clickhand=()=>{
        let {store} =this.props
        store.clickhand()
    }
    render() {
        let {store}=this.props
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.sub}>
                    <Text style={styles.txt}>-</Text>
                </TouchableOpacity>
                <TextInput style={{width:100,height:35,borderWidth:1}} value={store.counter.toString()}/>
                <TouchableOpacity onPress={this.add}>
                    <Text style={styles.txt}>+</Text>
                </TouchableOpacity>
                <TextInput value={store.str} style={styles.inp} onChangeText={this.changehand}/>
                <Button title="添加" onPress={this.clickhand}/>
                <View>
                    {
                        store.list.map((item)=>{
                            return <Text>{item}</Text>
                        })
                    }
                </View>
            </View>
        );
    }
}



最后写在app文件内就可以了

import React, {Component} from ‘react‘;
import {Platform, StyleSheet, Text, View} from ‘react-native‘;
import Home from "./src/pages/home"

import {Provider} from "mobx-react"
import Appstore from "./src/store/appStore"

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Provider store={Appstore}>
        <Home/>
      </Provider>
    );
  }
}

最后：store的另一种写法：
通过

observable 来定义数据内容，

action 来执行

class appStore{
    @observable counter = 0;
    @observable themeType = ‘light‘;
    @observable theme=themeData[‘light‘];
    @action changeTheme=(themeType)=>{
        this.themeType=themeType
        this.theme=themeData[themeType];
    }
}
export default new appStore();

很简单的mobx状态管理工具

标签：NPU   plugins   inpu   this   width   return   The   class   文件   

原文地址：https://www.cnblogs.com/jingguorui/p/11511143.html