mobx操作详解

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

在操作mobx之前首先你得先了解一下mobx是用来干嘛的

mobx官网：`https://cn.mobx.js.org/`

其次拥有自己得一个react-mobx项目（前几天发了一次项目创建流程）

1.src/创建store.js用来存放数据

import { observable, computed, action, autorun, runInAction } from "mobx";
// import {observable, computed, action} from 'mobx';
// @observable
// 等同于 this.state 可以被读取也可以被修改
// @observer
// 等同于 view 页面中
// 主要是为了让页面变成响应式，能进行读取和操作 store
// @action
// 等同于 this.setState 修改
class Store {
  @observable tradeCfg = {
    sadf: "sadf",
  };
  @observable baseInfo = {};
  @observable callback = null;
  @observable token = [
    {
      id: 1,
      name: "YD",
    },
    {
      id: 2,
      name: "ETH",
    },
  ];
}

export default Store;

2.在Router.js入口中引入并注入数据

import NewStore from "./store/store";
const stores = {
  first: new FirstStore(),
  //可以有多个
};

注入数据

 <BrowserRouter>
    {/* 根入口注入数据 */}
    <Provider {...stores}>
      {/* {...store}等同于stores={stores} */}
      <App />
    </Provider>
  </BrowserRouter>

3.src/views/创建first文件/index.jsx

import React, { Component } from "react";
import { withRouter, NavLink } from "react-router-dom";
import { observer, inject } from "mobx-react";
@withRoute //更新数据
@inject('first')//接收数据
@observer 让页面变成响应式
class view extends Component.....

4.在App.js中更改路由配置

引入
const First = lazy(() => import("./views/first"));

 render() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          {/* route使用 */}
          <Route exact path="/" component={First} />
          {/*exact 精准匹配 */}
          <Redirect to="/" />
          {/* redirect里面写的相当于404  非法url*/}
        </Switch>
      </Suspense>
    );
  }