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