很简单的mobx状态管理工具

Posted 2022-10-17 jingguorui

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();