码迷,mamicode.com
首页 > 其他好文 > 详细

很简单的mobx状态管理工具

时间:2019-09-12 12:51:49      阅读:202      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!