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的状态变更时再次触发。
