# mobx版品牌管理

**Repository Path**: duans/mobx-brand

## Basic Information

- **Project Name**: mobx版品牌管理
- **Description**: mobx版品牌管理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: base
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-18
- **Last Updated**: 2021-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mobx版品牌管理

## 初始化项目
```js
create-react-app mobx-brand
```
## 安装生产依赖
```js
yarn add mobx mobx-react
```

## 安装开发依赖
```js
yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
```
## 配置babel
1. 暴露项目配置文件, 项目根目录下打开命令行, 运行如下命令
> 运行如下命令之前, 必须将项目更新全部提交到git本地仓库, 否则无法导出项目配置文件
```js
yarn eject
```
2. 打开package.json配置文件, 添加如下配置项
```js
{
    "babel": {
        "presets": [
        "react-app"
        ],
        "plugins": [
        + [
        +   "@babel/plugin-proposal-decorators",
        +   {
        +     "legacy": true
        +   }
        + ],
        + [
        +   "@babel/plugin-proposal-class-properties",
        +   {
        +     "loose": true
        +   }
        + ]
        + ]
    }
}
```
3. 重启开发服务器
```js
yarn start
```
4. 让vscode识别装饰器语法
 1. 在设置面板中搜索`experimentalDecorators`, 并在检索结果中勾选配置选项


## mobx核心对象
1. makeAutoObservable
    - 类型: 方法
    - 作用: 将所有的属性数据变为可观察对象
    ```js
    class AppStore{
        constructor(){
            // 将所有的属性变为可观察对象
            makeAutoObservable(this);
        }
    }
    ```

2. action
    - 类型: 方法装饰器
    - 作用: 修饰数据操作方法
3. computed
    - 类型: 方法装饰器
    - 作用: 被修饰的方法可以在组件中直接当做属性使用(类似vue中的计算属性)

## mobx-react核心对象
> mobx-react作用: 方便在组件内部操作通过mobx创建的可观察数据存储对象store
1. observer:
    - 类型: 类装饰器
    - 作用: 监视组件内部所使用的store数据对象的改变
    ```jsx
    @observer 
    export default class BrandList extends React.Component{

    }
    ```
2. inject
    - 类型: 类装饰器(装饰器工厂)
    - 作用: 将数据存储对象store注入组件内部
    ```jsx
    @inject('store') 
    export default class BrandList extends React.Component{

    }
    ```
3. Provider:
    - 类型: 组件
    - 作用: 将数据存储对象store传递给内部子组件,在组件内部课通过`this.props.store`获取数据存储对象 
    ```jsx
    import store from './store/index';
    // 导入BrandList.jsx
    import BrandList from './pages/BrandList';

    function App() {
    return (

        <div className="App">
            <Provider store={store}>
                <BrandList/>
            </Provider>
        </div>
    );
    }

    export default App;
    ```
## 参考文档
- [mobx在线文档](https://cn.mobx.js.org/)