mobx操作详解

在操作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>
    );
  }