Mobx 安装及配置装饰器

第一步

项目下运行 npm run eject, 获取项目配置

npm run eject

如果此时报错，例如：

image.png

这是因为我们使用脚手架创建一个项目的时候，自动给我们增加了一个.gitignore文件

image.png
而我们本地却没有文件仓库

这就需要在项目下输入命令

git add .
git commit -m "随便"

然后在执行 npm run eject，成功后安装 @babel/plugin-proposal-decorators

npm install --save-dev @babel/plugin-proposal-decorators

修改package.json中的babel配置

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

配置成功，

安装 mobx mobx-react

npm install --save mobx mobx-react

创建store

import {observable,action,computed} from 'mobx'
export default class Store {
    @observable count = 1; // 定义可观察的state

    @action // 定义改变state的动作
    changeCount(val) {
         this.count ++ 
    }
    @computed //衍生 (计算值与vue计算属性类似）
    get isAdd () {
        return this.count > 3
    }
    @action//异步
    async getData() {
        await axios.get('XXXXX')
            .then(res => {
                console.log(res);
            })
    }
}

在根组件引入store

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


const stores ={ Store: new store() } // 可以有多个store
ReactDom.render(<Provider {...stores}>
    <App />
</Provider>,document.getElementById('root'));

在组件中使用

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

@inject("Store") // 注入
@observer
export default class Demo extends Component {
    componentDidMount() {
         console.log(this.props.Store);// 获取store
    }
}