Mobx是一个强大的状态管理工具，按照笔者的理解，它就是个存东西的，
和localstorage相比，好处是可以牵一发而动全身，举一个简单地例子：Mobx中存有一个变量a=1,现在有A页面和B页面中都用到了变量a，在a页面中设置a=2，那么B页面中a的值也会变成2。

一、装包

• npm install mobx --save
• npm install mobx-react --save
• npm install @babel/plugin-proposal-decorators --save-dev

二、配置 .babelrc（没有就在根目录新建一个）

image.png

• .babelrc文件内容

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy" : true }]
  ]
}

三、配置 tsconfig.json

image.png

• tsconfig.json文件内容

{
  "compilerOptions": {
      "experimentalDecorators": true,
      "allowJs": true
  }
}

四、 先看一下目录结构

image.png image.png image.png

五、使用

• mobx文件夹下的index文件

import upDate  from './store/upDate'

const store = {
  upDate
}

export default store

• mobx文件夹下的store文件夹下的upData.js文件（这里边是存数据的哦）

import { observable, action } from "mobx"
class MobxStore {
    @observable user
    @observable name
    @observable pwd
    //变量声明

    constructor() {
        this.user = ''
        this.name = ''
        this.pwd = ''
        //初始化变量，可以在这里赋初值滴
    }
    @action upUser = (user) => {
        this.user = user
    }
    @action removeUser = () => {
        this.user = ''
    }
    @action upName = (name) => {
        this.name = name
    }
    @action removeName = () => {
        this.name = ''
    }
    //函数声明
}

const upDate = new MobxStore()
export default upDate

• 运用到mobx中变量的页面

这样把它导入进来

image.png

构造器中

image.png

六、结束
一顿操作之后，mobx中的变量和函数们都可以任你读取了,例如:
你需要读取其中的name可以这样：let name=this.upData.name
你需要更改其中的name可以调用函数 this.upDate.upName('小明')
当然也可以这样 this.upData.name='小明'（不推荐这样）
不过为了代码好看，建议写修改的函数。

如果突然出现了一片红色说什么乱七八糟的东西没有包含，把模拟器什么的能关的都关掉重新跑

好久没有更新了当看到有新朋友关注了我，还有评论。看了看我的两个小粉丝，突然又来了激情，同样作为初学者的作者非常希望大家在接触这些新知识的时候有完整的教程，你们的点赞和评论将是对作者最大的鼓励，谢谢。祝有成！共进步！