mobx在react中多模块的使用

本文链接： https://blog.csdn.net/qq_40816649/article/details/100656796

react的状态管理工具有redux和mobx，之前学习过redux感觉还是比较复杂的然后工作中有用到mobx于是就学习了一下mobx中间遇到了一些问题。
首先是ts，mobx的文档有用到修饰器简化了大量的decorators修饰器代码。但是直接拿过来用不行的需要安装ts环境。

npm install -g typescript

在项目根目录下新建tsconfig.js文件配置ts（公司taro项目配置的ts）

{
  "compilerOptions": {
    "target": "es2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

这样就可以新建ts文件编写mobx了

mobx.js为入口文件

import module1 from './module1'
import module2 from './module2'

const Store = {
  module1,
  module2
}

export default Store

分为两个模块module1和module2

import { observable, computed, action } from 'mobx'

class Module1 {
  @observable name: String;
  constructor() {
    this.name = 'module1'
  }
  @computed get getName() {
    return this.name
  }
  @action setName = (data: String) => {
    this.name = data
  }
}

const module1 = new Module1()
export default module1

使用
在项目的index.js中将store挂载到全局，引入mobx-react的provider组件然后将定义好的store绑定到这个组件上就可以在全局的react组件上使用了。

import React from 'react';
import ReactDOM from 'react-dom';

// import { Provider } from 'react-redux'
// import store from './store/index.js'

import { Provider } from 'mobx-react'
import store from './mobxStore/mobx'

import Router from './router.js'

const App = (
  <Provider {...store}>
    <div>
      <Router />
    </div>
  </Provider>
)

ReactDOM.render(App , document.getElementById('root'));

组件使用store，这里要注意的是组件中如果组件是使用了@修饰器，组件不是ts文件结尾的文件并且react项目时通过create-react-app建立的那么就需要开启框架的修饰器功能否则会编译报错，因为create-react-app默认是没有开启修饰器支持的。
开启修饰器的方法：https://blog.csdn.net/qq_40816649/article/details/100655462

import {observer, inject} from 'mobx-react';

// 观察者
@inject('module1','module2') 
@observer

componentDidMount() {
    console.log(this.props.module1.name,this.props.module2.name1)//使用mobx的状态管理
}

总结
和redux比较起来mobx更加类似于vuex操作和代码量也比较简单，只是mobx需要配置修饰器的支持。

mobx在react中多模块的使用

猜你喜欢