类组件与函数组件中简单使用mobx进行数据传递

Posted 2021-09-07 老张在线敲代码

src下创建全局的store文件store.js

import {observable, computed, action, autorun,runInAction} from 'mobx';
// import {observable, computed, action} from 'mobx';
class Store {
    @observable tradeCfg = {
        'name':'小明'
    };
    @observable baseInfo = {};
    @observable callback = null;
    @observable token = [
        {
            "id":1,
            "name":"YD"
        },
        {
            "id":2,
            "name":"ETH"
        }
    ];
}
export default Store;

app.js配置路由页面

import React, { Component } from "react";
import { withRouter, NavLink, Switch, Redirect, Route } from "react-router-dom";
import Home from "./views/home/index";//类组件mobx
import Fn from "./views/fn/index"// 函数组件mobx
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/fn" component={Fn} />
          <Redirect to="/" />
        </Switch>
      </div>
    );
  }
}
export default App;

index.js挂载router.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles/index.css";
import Router from "./router";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

router.js注入store中的数据

import React from 'react';
import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';
import { Provider } from 'mobx-react';


import App from './App.js';
import FirstStore from './store/store';
const stores = {
  FStore: new FirstStore(),
  // ...other stores
};

const Router = () => (
    <BrowserRouter>
        <Provider {...stores}>
            <App/>
        </Provider>
    </BrowserRouter>
)
export default Router;

先简单的获取到数据，app.js/index.js/router.js/store.js里没变

类组件方式

index.jsx

import React, { Component } from "react";
import {NavLink,withRouter} from "react-router-dom"
import {observer,inject} from 'mobx-react';
@withRouter//更新数据
@inject('FStore')//接受数据
@observer//让页面变成响应式
class Home extends Component {
  render() {
    console.log(this.props)
    return <div>类组件mobx</div>;
  }
}

export default Home;

函数组件方式

index.jsx

import React from "react"
import {withRouter} from "react-router-dom"
import {observer,MobXProviderContext} from "mobx-react"
function useStores(name) {
    return React.useContext(MobXProviderContext)[name]
}
const Fn=(props)=>{
    const {tradeCfg}=useStores("FStore")
    console.log(tradeCfg)
    return <div>
        函数组件mobx
        {tradeCfg.name}
    </div>
}
export default withRouter(observer(Fn));

对获取到的数据进行简单的更改

类组件篇
SecondStore.js

import {observable, computed, action, autorun,runInAction,makeAutoObservable} from 'mobx';
class Store {
//    1.定义一个state（observable）相当于state
//    2.observer与页面进行关联
//    3.action对数据进行修改相当于setstaate
    constructor(){
        makeAutoObservable(this)
        //对this重新做一个指向才可以触发更新
    }
    @observable name1="小红";
   
    @action fn=()=>{
            this.name1="mzqrm"
    }
    @action fn1=()=>{
        this.name1="小红"
}
}

export default Store;

在index.js中引入SecondStore数据

import React from 'react';
import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';
import { Provider } from 'mobx-react';


import App from './App.js';
import FirstStore from './store/store';
import SecondStore from './store/secondStore';
const stores = {
  FStore: new FirstStore(),
  SecondStore: new SecondStore(),
  // ...other stores
};

const Router = () => (
    <BrowserRouter>
        <Provider {...stores}>
            <App/>
        </Provider>
    </BrowserRouter>
)
export default Router;

index.jsx

import React, { Component } from "react";
import {NavLink,withRouter} from "react-router-dom"
import {observer,inject} from 'mobx-react';
@withRouter//更新数据
@inject('FStore',"SecondStore")//接受数据
@observer//让页面变成响应式
class Home extends Component {
  render() {
    console.log(this.props.SecondStore)
    const {name}=this.props.FStore.tradeCfg;
    const {name1,fn,fn1}=this.props.SecondStore;
    console.log(this.props)
    return <div>类组件mobx
      <br />
      {name}
      {name1}
      <input type="button" value="更改"  onClick={()=>{fn()}}/>
      <input type="button" value="更改"  onClick={()=>{fn1()}}/>
    </div>;
  }
}

export default Home;