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;