How to use the mobx-react/index.inject function in mobx-react

import LoginForm from './LoginForm'
import RegisterForm from './RegisterForm'

const url = 'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/bg1.jpg?raw=true'
const imgs = [
  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide1.jpg?raw=true',
  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide2.jpg?raw=true',
  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide3.jpg?raw=true',
  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide4.jpg?raw=true'
]





@withRouter @inject('appStore') @observer
class Login extends React.Component {
  state = {
    showBox: 'login',   //展示当前表单
    url: '',  //背景图片
    loading:false,
    loading2:false,
  }

  componentDidMount () {
    const isLogin = this.props.appStore
    if(isLogin){
      this.props.history.go(1)     //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
      // this.props.appStore.toggleLogin(false) //也可以设置退出登录
    }
    this.initPage()
    preloadingImages(imgs)  //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？

import * as React from 'react';
import { Link } from 'react-router-dom';
import Title from '@components/Common/Title/Title';
import { inject, observer } from 'mobx-react/index';
import cs from 'classnames';
import { socialMedia, webpSuffix, svgSprite } from '@constants/constants';
import routePath from '@constants/routePath';
import svgIcons from '@assets/images/yancey-official-blog-svg-icons.svg';
import PostSummary from '@components/Post/PostSummary/PostSummary';
import styles from './Home.module.scss';
import { IHomeProps } from '../../types/home';

@inject('homeStore')
@inject('articleStore')
@observer
class Home extends React.Component {
  constructor(props: IHomeProps) {
    super(props);
    this.state = {};
  }

  public componentDidMount() {
    const { homeStore, articleStore } = this.props;
    homeStore!.getCover();
    homeStore!.getMotto();
    homeStore!.getProject();
    homeStore!.getAnnouncement();
    articleStore!.getPostsByPage(1);
  }

import React, { Component } from 'react';
import Recaptcha from 'react-google-recaptcha';
import './login.css';
import { inject, observer } from 'mobx-react/index';

@inject('loginStore')
@observer
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
  }

  render() {
    const { loginStore } = this.props;
    window.recaptchaOptions = {
      lang: 'ja',
    };
    const btnStyle = {

import React, { Component } from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { inject, observer } from 'mobx-react/index';
import cs from 'classnames';
import Carousel from 'nuka-carousel';
import styles from './music.module.css';
import {
  aliOSS, checkWebp, webp, formatJSONDate,
} from '../../utils/tools';

@inject('musicStore')
@inject('articleStore')
@observer
class Music extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {
    window.scrollTo(0, 0);
  }

  componentDidMount() {
    const { musicStore, articleStore } = this.props;
    musicStore.getLiveToursData();
    musicStore.getRecordsData();
    musicStore.getYanceyMusicData();

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { inject, observer } from 'mobx-react/index';
import styles from './tag.module.css';

@inject('articleStore')
@observer
class Tag extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

type="number" placeholder={chrome.i18n.getMessage('rangeFromPlaceholder')}/>
          {' — '}
          <input placeholder="{chrome.i18n.getMessage('rangeToPlaceholder')}/" type="number" name="{'sizeMax'}">
        
      
    );
  }
}

@inject('rootStore')
@observer
class SeedFilter extends React.Component {
  static propTypes = {
    rootStore: PropTypes.object,
    filtersStore: PropTypes.object,
  };

  constructor(props) {
    super(props);

    this.min = null;
    this.max = null;
  }

  onChange = () =&gt; {
    const filter = this.props.filtersStore;

import React from "react";
import {inject, observer} from "mobx-react/index";
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.min.css';
import getLogger from "../tools/getLogger";
import PropTypes from "prop-types";

const logger = getLogger('Filters');

@inject('rootStore')
@observer
class Filters extends React.Component {
  static propTypes = {
    rootStore: PropTypes.object,
  };

  constructor(props) {
    super(props);

    if (this.props.rootStore.options.state === 'idle') {
      this.props.rootStore.options.fetchOptions();
    }
  }

  get filtersStore() {
    return this.props.rootStore.filters;

type="number" placeholder={chrome.i18n.getMessage('rangeFromPlaceholder')}/>
          {' — '}
          <input placeholder="{chrome.i18n.getMessage('rangeToPlaceholder')}/" type="number" name="{'seedMax'}">
        
      
    );
  }
}

@inject('rootStore')
@observer
class PeerFilter extends React.Component {
  static propTypes = {
    rootStore: PropTypes.object,
    filtersStore: PropTypes.object,
  };

  constructor(props) {
    super(props);

    this.min = null;
    this.max = null;
  }

  onChange = () =&gt; {
    const filter = this.props.filtersStore;

import * as React from 'react';
import { Link } from 'react-router-dom';
import Title from '@components/Common/Title/Title';
import { inject, observer } from 'mobx-react/index';
import cs from 'classnames';
import { socialMedia, webpSuffix, svgSprite } from '@constants/constants';
import routePath from '@constants/routePath';
import svgIcons from '@assets/images/yancey-official-blog-svg-icons.svg';
import PostSummary from '@components/Post/PostSummary/PostSummary';
import styles from './Home.module.scss';
import { IHomeProps } from '../../types/home';

@inject('homeStore')
@inject('articleStore')
@observer
class Home extends React.Component {
  constructor(props: IHomeProps) {
    super(props);
    this.state = {};
  }

  public componentDidMount() {
    const { homeStore, articleStore } = this.props;
    homeStore!.getCover();
    homeStore!.getMotto();
    homeStore!.getProject();
    homeStore!.getAnnouncement();
    articleStore!.getPostsByPage(1);
  }

className="input__input input__input-size-filter input__input-range input__input-range-from"
            type="number" placeholder={chrome.i18n.getMessage('rangeFromPlaceholder')}/>
          {' — '}
          <input placeholder="{chrome.i18n.getMessage('rangeToPlaceholder')}/" type="number" name="{'sizeMax'}">
        
      
    );
  }
}

@inject('rootStore')
@observer
class SeedFilter extends React.Component {
  static propTypes = {
    rootStore: PropTypes.object,
    filtersStore: PropTypes.object,
  };

  constructor(props) {
    super(props);

    this.min = null;
    this.max = null;
  }

  onChange = () =&gt; {
    const filter = this.props.filtersStore;