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

原创 13533613144 随笔 React 102阅读 2018-08-18 17:46:14 举报

最近项目用到了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'

class Gstore{

@observable num = 0;
@actions changeNum = (n) =>{
    this.num = n;
}

}

export default new GStore();
在入口index.jsx

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

ReactDOM.render(
<Provider GStore={GStore}>
</Provider>,
document.getElementById('root')
);

在Login.jsx页面中调用GStore;
import React from 'react';
import PropTypes from 'prop-types';
import { observer , inject } from 'mobx-react';
import bindAll from 'lodash.bindall';

@inject('GStore')
@observer

class LoginComponent extends React.Component{
constructor(props){
super(props);
bindAll(this, [
'hanldChangeNum',
]);
this.state ={

    };
}
hanldChangeNum(){
    this.props.GStore.changeNum(this.props.GStore.num + 1);
}
render(){
    return (
        <div>
            <h1>Hello, world!</h1>
            <h6>{this.props.GStore.oid}</h6>
            <button onClick={this.hanldChangeNum}>点我!</button>
        </div>
    );
};

}

export default LoginComponent;
每次点击点击GStore.num的数值+1

如果想在当前组件下用状态值,可以在同级containers新建个store文件再新建index.js

import { observable, action } from 'mobx';

class Store {

@observable storeNum = 140;

@action changeStoreNum = (id) =>{
    this.storeNum = id;
}

}

export default new Store;

在页面调用的则是
import React from 'react';
import PropTypes from 'prop-types';
import { observer , inject } from 'mobx-react';
import bindAll from 'lodash.bindall';
import Store from '../store'

@inject('GStore')
@observer

class LoginComponent extends React.Component{
constructor(props){
super(props);
bindAll(this, [
'hanldChangeOid'
]);
this.state ={

    };

}
componentWillMount(){
    var self = this;
    var n = 0;
    //调用Store 文件夹里边的
    console.log(Store.storeNum,'store_num-------');
}
hanldChangeOid(){
    this.props.GStore.changeOid(this.props.GStore.oid + 1);
}
render(){
    return (
        <div>
            <h1>Hello, world!</h1>
            <h6>{this.props.GStore.oid}</h6>
            <button onClick={this.hanldChangeOid}>点我!</button>
        </div>
    );
};

}

export default LoginComponent;

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复