Based on using

Mobx

The installation

# Mobx support
npm install mobx mobx-react -S
# Decorator support
npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
Copy the code

Modify the configuration

git add .  # Submit code
git commit -m'Submission Instructions'

yarn run eject  Y  # Shatter configuration
Copy the code

configuration

package.json

"babel": {
    "presets": [
      "react-app"]."plugins": [["@babel/plugin-proposal-decorators",
        {
          "legacy": true}], ["@babel/plugin-proposal-class-properties",
        {
          "legacy": true}}]].Copy the code

State management

import {
    observable, action, computed
} from 'mobx'

class AppStore {
    @observable time= 'time'
    @observable todos = ['1'.'2'.'3']

    @action addTodo(todo){
        this.todos.push(todo)
        / * * * business page calls. * this props. Store. AddTodo (' ABC ') * * * / 
    }
    // changeTime is reexecuted when the time value changes, returning the new value
    @computed get changeTime() {return this.time 
    }
}

const store = new AppStore()

// Change the external time
/** * store.addTodo('abc') * */
export default store
Copy the code

APP.js

import React from 'react';
import { Provider } from 'mobx-react'
import store from './store'

import Home from './home.jsx'
import './App.css';

function App() {
  return (
    <div className="App">
        <Provider store ={store}>
          <Home></Home>
        </Provider>
    </div>
  );
}

export default App;

Copy the code

Home.js

import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'

@inject('store') @observer
 class Home extends Component {
    constructor(props){
        super(props)
        this.state = {

        }
    }
    render() {
        let { store } = this.props
        return (
            <div>
                <p>{store.time}</p>
                <ul>
                    {store.todos.map((item,index) => {
                        return (
                        <li key={index}>{item}</li>)})}</ul>
            </div>)}}export default Home;
Copy the code