mobx使用数组提示越界_记录 mobx,mobx-react, 配置与使用 (踩坑版)

记录 mobx,mobx-react, 配置与使用 (踩坑版)

最近项目用到了 Mobx 开发, 配置环境是我们老大安装好的然后我是在这基础上使用而已, 今天得闲, 自己学着配置了一番, 这其中踩过的坑也是不计其数, 以下就记录一下自己在安装过程中踩过的坑.

安装

安装 mobx,mobx-react;

npm install mobx mobx-react --save

安装好这个不要着急直接用, 我们还缺少安装 es7 装饰器语法转义的插件,(注: 如果没安装转义插件就会出现 @符号报错, babel-preset-stage-1, 这个一定是要 babel-preset-stage-1 版本的, 不能使用 babel-preset-stage-3, 不然会有后面 "=" 报错.)

npm install babel-plugin-transform-decorators-legacy babel-plugin-transform-decorators babel-preset-stage-1 --save

安装好之后用在. babelrc 文件里边添加{

"presets":["es2015","react","stage-1"],

"plugins":["transform-decorators-legacy","transform-decorators"]

}

好啦, 以上就是安装步骤, 下面简单介绍下怎么操作.

{

Observable: 可观察的状态,

observer: 观察者,

Actions: 动作,

inject: 将 Gstore 注入到 props 上,

}

在这新建新建一个 GStore.js 文件,import{observable,action}from'mobx'

classGstore{

@observablenum=0;

@actionschangeNum=(n)=>{

this.num=n;

}

}

exportdefaultnewGStore();

在入口 index.jsx

引入 (将 GStore 作为全局引入到 props 上);import{observer,Provider}from'mobx-react';

importGStorefrom'./GStore';

ReactDOM.render(

,

document.getElementById('root')

);

在 Login.jsx 页面中调用 GStore;importReactfrom'react';

importPropTypesfrom'prop-types';

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

importbindAllfrom'lodash.bindall';

@inject('GStore')

@observer

classLoginComponentextendsReact.Component{

constructor(props){

super(props);

bindAll(this,[

'hanldChangeNum',

]);

this.state={

};

}

hanldChangeNum(){

this.props.GStore.changeNum(this.props.GStore.num+1);

}

render(){

return(

Hello,world!

{this.props.GStore.oid}

点我!

);

};

}

exportdefaultLoginComponent;

每次点击点击 GStore.num 的数值 + 1

如果想在当前组件下用状态值, 可以在同级 containers 新建个 store 文件再新建 index.jsimport{observable,action}from'mobx';

classStore{

@observablestoreNum=140;

@actionchangeStoreNum=(id)=>{

this.storeNum=id;

}

}

exportdefaultnewStore;

在页面调用的则是importReactfrom'react';

importPropTypesfrom'prop-types';

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

importbindAllfrom'lodash.bindall';

importStorefrom'../store'

@inject('GStore')

@observer

classLoginComponentextendsReact.Component{

constructor(props){

super(props);

bindAll(this,[

'hanldChangeOid'

]);

this.state={

};

}

componentWillMount(){

varself=this;

varn=0;

// 调用 Store 文件夹里边的

console.log(Store.storeNum,'store_num-------');

}

hanldChangeOid(){

this.props.GStore.changeOid(this.props.GStore.oid+1);

}

render(){

return(

Hello,world!

{this.props.GStore.oid}

点我!

);

};

}

exportdefaultLoginComponent;

来源: http://www.qdfuns.com/article/49219/97df461ff8a021f030763be5797be607.html