简单使用mobx

1、配置mobx

创建项目后 先使用 npm run eject 弹出webpack配置 然后直接敲y 搞定

安装mobx

npm i mobx 

如果git冲突（没有则请无视）

git add .

回车

git commit -m ''

回车

// ​ 注意不要git push

安装mobx-react

npm i mobx-react

安装支持装饰器所需依赖

npm i babel-plugin-transform-decorators-legacy -D @babel/preset-env -D babel-plugin-transform-class-properties -D @babel/plugin-proposal-decorators -D

配置package.json

   "babel": {
	    "plugins": [
	      [
	        "@babel/plugin-proposal-decorators",
	        {
	          "legacy": true
	        }
	      ],
      "transform-class-properties"
    ],
    "presets": [
      "react-app",
      "@babel/preset-env"
    ]
    }

2、使用mobx

现在建一个store/user.js存储数据 其中可以使用@observalbe 和 @action来声明数据和方法

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

class user {
  userInfo = 0
  @observable num2 = 1
  @observable num3 = 1

  @computed
  get count() {
    return this.num2 + this.num3
  }
  
  @action getUSerInfo() {
    // 异步请求 res
    this.userInfo = {
      id: 1,
      name: '222'
    }
  }
}

export default new user()

现在建一个store/index.js导出数据

import user from './user'

const store = {
  user
}

export default store

在入口文件文件，src/index.js中使用Provider

import ReactDOM from 'react-dom';
import App from './App';
import store from './store'
import {Provider} from 'mobx-react'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

哪个组件使用 ， 就在哪个组件中 “注入” inject

import { Component } from 'react'
import {inject,observer} from 'mobx-react'
@inject('user')
@observer
export default class CountNum extends Component
{
    userInfo(){
        this.props.user.getUSerInfo();
    }
    render()
    {
        return (
            <div>
                <h2>计数器</h2>
                {this.props.user.num2}
                {this.props.user.num3}
                <button onClick={this.userInfo}>+</button>
            </div>
        )
    }
}

注意 要在类的上方使用修饰器 @observer 声明这个组件是一个被监听的组件  否则 数据不能随之改变