mobx仓库

react之创建mobx仓库

第一步：创建仓库的js文件 目录结构 src/mobx/index.js

import { observable, action } from "mobx";//引入对应的包
//创建class类仓库  Store仓库名随便起
class Store {
    @observable  //observable的意思是被观测 简单说就是【被观察者】被动
    //开始放数据
    data = 'mobx测试';
    msg = 555;

    // @action.bound  this指向到当前类

  //action 声明他 下面的方法就可以被使用
    @action
    setData = function (val) {
        this.data = val
    }
    setMsg = (msg) => {
        this.msg = msg
    }
}

export default new Store();

第二部：很熟悉的组件创建 只是引入了mobx仓库 和一个mobx.js的子组件 【当前的组件算是父组件】Mobx.js组件 目录结构 src/page/Mobx.js

import React, { Component } from 'react';
import Mymbox from "../component/mobx";
import testStore from "../mobx";

class Mobx extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                  //自定义传属性  传下去  很像redux  不过mobx的属性名可以自定义 随便改名
                <Mymbox testStore={testStore}></Mymbox >
            </div>
        );
    }
}

export default Mobx;

第三部：子组件mobx.js 目录结构 src/component/mobx.js

observer是观察者 主动 定义后 就可以连接mobx仓库
在触发的事件里使用 this.props.testStore.setData(555)
this.props.仓库名.仓库里的方法名(参数) 触发
仓库名是父组件引入仓库的时候的名字

import React, { Component } from 'react';
import { observer } from "mobx-react";

@observer
class Mobx extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        console.log(this.props)
        return (
            <div>
                <p>{this.props.testStore.data}</p>
                <button onClick={() => this.yes()}>setData</button>
                <br />
                <button onClick={() => this.msg()}>setMsg</button>
            </div>
        );
    }
    // 修改mobx仓库数据
    yes() {
        this.props.testStore.setData(555)
    }
    msg() {
        this.props.testStore.setMsg('new msg 666')
    }
}

export default Mobx;

可以在github下载实验 https://github.com/divcssjs/react_sx_elm
这个是正在练习的 饿了吗 的一个移动页面 在内部练习了好多常用的技术
有react的hook ， scrollToElement ， mobx等

使用VScode编辑器时不支持es7语法 设置中 属性设置对勾

javascript.implicitProjectConfig.experimentalDecorators

本文原创divcssjs