[FE] hello-mobx

1. 项目初始化

npm init

2. 安装开发环境依赖

npm install --save-dev \
babel-core \
babel-loader \
babel-preset-es2015 \
babel-preset-stage-0 \
babel-plugin-transform-decorators-legacy

3. 安装模块依赖

npm install --save mobx

4. 新建./.babelrc和./webpack.config.js两个文件

（1）.babelrc

{
    "presets": [
        "es2015",
        "stage-0"
    ],
    "plugins": [
        "transform-decorators-legacy"
    ]
}

（2）webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        index: './index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        libraryTarget: 'umd'
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    }
};

5. 例子

（1）目录结构

+ dist    //自动生成的目录
+ node_modules    //自动生成的目录
.babelrc
index.html
index.js
package-lock.json    //自动生成的文件
package.json
webpack.config.js

（2）index.js

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

class Store {
    @observable n = 0;

    @action inc() {
        this.n++;
    }

    @computed get result() {
        return this.n * 2;
    }
};

const store = new Store();

setInterval(() => {
    store.inc();
}, 1000);

autorun(() => {
    console.log(store.result);    //0 2 4 6 8 ...
});

注：
（1）@observable是一个属性装饰器，mobx用来监控对象属性值的变更。
（2）@action用来指明后面的函数会导致observable的变更，@action装饰器是可以省略的。
（3）@computed是根据现有的状态，来计算得到的一些值，例如，本例中store中只有状态n，而result是根据n计算得到的。
（4）autorun会自动触发它的回调函数，它会先调用一次，然后每次store的状态变更时再次触发。

---

参考

MobX
TC39 Stage 2: Class and Property Decorators
高效的 MobX