乐趣区

关于mobx:reactmobx6使用案例

jiezi

​

脚手架 create-react-app

一、装置
//npm yarn 随需要，尽量不要混用，混用有些资源可能会呈现掉包 

yarn add mobx
yarn add mobx-react


// 版本号
"mobx": "^6.3.2",
"mobx-react": "^7.2.0",

二、配置 package.json
1. 把暗藏的 webpack 裸露进去，开释之前记得请先提交代码 git commit 一次 

yarn run eject

2. 装置 @babel/plugin-proposal-decorators 插件 必须的 

yarn add @babel/plugin-proposal-decorators

 3. 批改增加 package.json 配置（手动）

"babel": {
    "plugins": [["@babel/plugin-proposal-decorators", {"legacy": true}]
    ],
    "presets": ["react-app"]
}

三、定义 mobx 的 store
1. 目录机构 (mobx 反对多个多个状态模块)

stores
—– auth.js 模块 1

—– test.js 模块 2
—– index.js 总入口

2. 模块 auth.js

// auth.js 和 test.js 截然不同 展现 auth.js 做案例
// @action.bound 和  @action 区别 https://cn.mobx.js.org/refguide/action.html
import {observable, action, computed} from "mobx";
import {makeObservable} from "mobx";

export class AuthStore {
    // 定义变量
    @observable name = 'zhangsan000';
    @observable sex =  '男';
    @observable userObj = {
        name: 'zhangsan000',
        age: 233,
        token: '12345689'
    }

    // 初始化
    constructor() {
        // mobx6 版本当前 必须得在初始化加 makeObservable
        makeObservable(this);
        
    }

    // 动作 (bound 能够主动绑定 this 避免 this 指向扭转)
    @action.bound
    setName(v) {console.log('触发 action');
        this.name = v;
        
    }
    @action
    setUserObj(obj) {this.userObj = obj;}

    // 计算属性
    @computed get titleName(){return this.name+'___111';}
    
    
}

3. 定义导出进口 index.js

import {AuthStore} from "./auth";
import {TestStore} from "./test";

export const store = {authStore: new AuthStore(),
    testStore: new TestStore()};

4. 在 react 工程入口 导入 

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

ReactDOM.render(
  <React.StrictMode>
    <Provider store = {store}>
      <App  />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

四、在页面中应用 mobx, 并且通过 action 扭转 mobx

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

@inject('store')
@observer
class Index extends PureComponent {constructor(props) {super(props);
        console.log(this.props);
        this.state = {};}
    render() {const { authStore, testStore} = this.props.store;
        return (
            <div>
                {authStore.name}/
                
                {testStore.name}/

                {authStore.titleName}
                <br />
                <button onClick = {() => {authStore.setName(new Date().getTime()); 
                } }> 点击按钮触发 action</button>
            </div>
        );
    }
}

export default Index;

​

退出移动版