zoukankan      html  css  js  c++  java
  • mobx-react

    npx create-react-app hello-mobx
    yarn add mobx mobx-react react-router-dom

    使用装饰器

    https://www.jianshu.com/p/2e23781c957f

    新建文件夹store

    新建文件 homeStore.js index.js oneStore.js

    homeStore.js

    import { observable} from "mobx";
    class HomeStore {
      @observable homeNum = 0;
    }
    export default HomeStore;

    oneStore.js

    import { observable} from "mobx";
    class OneStore {
      @observable oneNum = 3333;
    }
    export default OneStore;

    index.js

    import HomeStore from "./homeStore";
    import OneStore from "./oneStore";
    let oneStore = new OneStore();
    let homeStore = new HomeStore();
    const stores = {
      oneStore,
      homeStore
    };
    /// 默认导出接口
    export default stores;

    index.js 主入口

    import React from "react";
    import ReactDOM from "react-dom";
    import Router from "./router/router";
    import { Provider } from "mobx-react";
    import stores from "./store";
    ReactDOM.render(
      <Provider {...stores}>
        <Router />
      </Provider>,
      document.getElementById("root")
    );

    home.jsx页面

    import React, { Component } from "react";
    + import { observer, inject } from "mobx-react";
    + @inject("homeStore")
    + @observer
    class Home extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
      render() {
        return (
          <div>
           +  <h1>首页数据源的number为:{this.props.homeStore.homeNum}</h1>
            <button onClick={() => {  this.props.history.push("/one") }}> 
                跳转到第一个页面
            </button>
          </div>
        );
      }
    }
    export default Home;

    修改数据源

    //homeStore.js
    import { observable,action} from "mobx";
    class HomeStore {
      @observable homeNum = 0;
      + @action addNum() {
      +  this.homeNum += 1;
      + }
      + @action lessNum() {
      +  this.homeNum -= 1;
      + }
    }
    export default HomeStore;
      render() {
        return (
              //代码自行添加。。。。。。
        +  <div>
        +   <h1>首页数据源的number为:{this.props.homeStore.homeNum}</h1>
        +    <button onClick={() => {this.props.homeStore.addNum()}} >
        +      点击添加
        +    </button>
        +    <button  onClick={() => {this.props.homeStore.lessNum()}}>
        +     点击删除
        +    </button>
        +  </div>
        //代码自行添加。。。。。。
        );
      }
    }
    export default Home;
  • 相关阅读:
    利用console控制台调试php代码
    数据库比对脚本(PHP版)
    Symfony框架系列----1.入门安装
    Symfony框架系列----常用命令
    Symfony命令行
    Linux SCP指令
    Linux 搭建SVN服务器
    Linux下 保存 git账号密码
    js 视差滚动 记录备份
    移动端 -webkit-user-select:text; ios10 bug 解决方案
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13559523.html
Copyright © 2011-2022 走看看