40 |
Display 界面：展示 Mobx 同步、异步修改数据
41 |
42 | counter 计数器次数：{ count }
43 |
44 |
45 |
46 |
47 |
48 |
49 |
address + number }
56 | />
57 |
58 | )
59 | }
60 | }
--------------------------------------------------------------------------------
/src/pages/display/model/index.js:
--------------------------------------------------------------------------------
1 | import { observable, action, runInAction } from "mobx";
2 |
3 | import { getMockData } from '../service/index';
4 |
5 | export default class DisplayModel {
6 | // count 计数器次数
7 | @observable count = 0;
8 |
9 | // Table 是否处于加载中
10 | @observable loading = false;
11 |
12 | // Table 数据源
13 | @observable listData = []
14 |
15 | /**
16 | * 修改 count 计数器次数的方法
17 | */
18 | @action
19 | changeCount = (type) => {
20 | switch(type) {
21 | case 'increment':
22 | this.count ++;
23 | break;
24 | case 'decrement':
25 | this.count --;
26 | break;
27 | }
28 | }
29 |
30 | /**
31 | * 获取 listData 数据的方法
32 | */
33 | @action
34 | getListData = async () => {
35 | this.loading = true;
36 | const response = await getMockData();
37 | runInAction(() => {
38 | this.loading = false;
39 | if(response && response.success) {
40 | this.listData = response.data.projects
41 | }
42 | })
43 | }
44 | }
--------------------------------------------------------------------------------
/src/pages/display/service/index.js:
--------------------------------------------------------------------------------
1 | import { get } from '@utils/request';
2 |
3 | /**
4 | * 获取 Mock 数据
5 | */
6 | export const getMockData = () => {
7 | return get('https://easy-mock.com/mock/5c2dc9665cfaa5209116fa40/example/mock');
8 | }
--------------------------------------------------------------------------------
/src/pages/exception/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button } from "antd";
3 |
4 | export default ({ history }) => {
5 | return (
6 |
7 |
404
8 |
9 |
10 | )
11 | }
--------------------------------------------------------------------------------
/src/pages/home/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'antd';
3 |
4 | export default ({history}) => {
5 |
6 | const toSettingPage = () => {
7 | history.push('/settings');
8 | }
9 |
10 | const toDisplayPage = () => {
11 | history.push('/display');
12 | }
13 |
14 | return (
15 |
16 |
当前是 Home 页面
17 |
18 |
19 |
20 | )
21 | }
22 |
23 |
--------------------------------------------------------------------------------
/src/pages/settings/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { inject, observer } from 'mobx-react';
3 | import { Button, Card } from 'antd';
4 | import PropTypes from 'prop-types';
5 |
6 | @inject('globalModel')
7 | @observer
8 | export default class Seetings extends Component {
9 |
10 | static propTypes = {
11 | globalModel: PropTypes.shape({
12 | username: PropTypes.string.isRequired,
13 | changeUserName: PropTypes.func.isRequired
14 | }).isRequired,
15 | history: PropTypes.shape({
16 | goBack: PropTypes.func.isRequired
17 | }).isRequired
18 | }
19 |
20 | constructor(props) {
21 | super(props);
22 | this.state = {
23 | val: ''
24 | }
25 | }
26 |
27 | /**
28 | * input 值发生变化时触发该方法
29 | */
30 | handleValueChange = (e) => {
31 | this.setState({
32 | val: e.target.value
33 | })
34 | }
35 |
36 | /**
37 | * 按钮点击时触发该方法
38 | */
39 | handleClick = () => {
40 | const { val } = this.state;
41 | const { changeUserName } = this.props.globalModel;
42 | if (val) {
43 | changeUserName(val);
44 | this.setState({
45 | val: ''
46 | })
47 | }
48 | }
49 |
50 | render () {
51 | const { username } = this.props.globalModel;
52 | const { val } = this.state;
53 | const title = "Settings 界面：展示以及修改全局 Model 中的属性"
54 | const actions = [
55 |
56 | ]
57 | return (
58 |
59 |
60 |
61 |
62 |
63 | 可以获取到 GlobalModel 中的 username:
64 | { username }
65 |
66 |
67 | )
68 | }
69 | }
--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
1 | import 'whatwg-fetch';
2 | import { stringify } from 'qs';
3 |
4 | /**
5 | * 使用 Get 方式进行网络请求
6 | * @param {*} url
7 | * @param {*} data
8 | */
9 | export const get = (url, data) => {
10 | const newUrl = url + '?' + stringify(data) + (stringify(data) === '' ? '' : '&') +'_random=' + Date.now();
11 | return fetch(newUrl, {
12 | cache: 'no-cache',
13 | headers: {
14 | 'Accept': 'application/json',
15 | 'Content-Type': 'application/json; charset=utf-8'
16 | },
17 | method: 'GET',
18 | })
19 | .then(response => response.json());
20 | }
21 |
22 | /**
23 | * 进行 Post 方式进行网络请求
24 | * @param {*} url
25 | * @param {*} data
26 | */
27 | export const post = (url, data) => {
28 | return fetch(url, {
29 | body: JSON.stringify(data),
30 | cache: 'no-cache',
31 | headers: {
32 | 'Accept': 'application/json',
33 | 'Content-Type': 'application/json; charset=utf-8'
34 | },
35 | method: 'POST',
36 | })
37 | .then(response => response.json())
38 | }
39 |
40 |
--------------------------------------------------------------------------------