React 安装 Mobx

最近想学习Mobx 在安装过程中碰到很多问题,依次如下,并解决。

首先安装依赖

npm install mobx mobx-react --save-dev

例子如下

import React from 'react';
import { observable,action } from 'mobx';
import { observer } from 'mobx-react';


class appStore {
    @observable name = 'gl'
    @action change(){
    // this.name='gaoliang'
    console.log('changed')
    }
}

export default new appStore()

运行报错

  Support for the experimental syntax 'decorators-legacy' isn't currently enabled 

错误原因:因为我的环境目前不支持Mobx装饰器语法

所以我们需要安装 @babel/plugin-proposal-decorators来支持装饰器语法

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

并且需要在package.json中配置babel

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

React 需要进入这一步 首先需要npm run eject
接下来会报错

Remove untracked files, stash or commit any changes, and try again.

我的解决方法是:先git add .,然后git commit -am 'save before ejecting'(因为我的demo中使用了git)

踩坑结束

你可能感兴趣的:(React 安装 Mobx)