​
PS:mobx6版本以後官方不建議使用@observable裝飾器了
可看官方案例 https://mobx.js.org/the-gist-of-mobx.html

腳手架 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
（1）使用@observable裝飾器

// auth.js和test.js 一模一樣 展示auth.js做案例
// @action.bound 和  @action 區別 https://cn.mobx.js.org/refguide/action.html
import { observable, action, computed, makeObservable } from "mobx";


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

    // 初始化
    constructor() {
        // mobx6版本以後 必須得在初始化加makeObservable
        // 也可以按照官方的方法makeObservable 案例,就不用寫@observable裝飾器了https://mobx.js.org/README.html
        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';
    }
    
    
}

（2）不使用@observable裝飾器

import { observable, action, computed, makeObservable} from "mobx";


export class AuthStore {
     name = 'zhangsan';
     sex =  '男';
     userObj = {
        name: 'zhangsan000',
        age: 233,
        token: '12345689'
    }

    constructor() {
        // mobx6 和以前版本這是最大的區別 官方案例 https://mobx.js.org/observable-state.html
        makeObservable(this, {
            name: observable,
            sex: observable,
            userObj: observable,
            setName: action,
            titleName: computed
        });
        
    }

    setName(v) {
        console.log('觸發action');
        this.name = v;
    }
    setUserObj(obj) {
        this.userObj = obj;
    }

   get titleName(){
        return this.name+'___111';
    }
    get userObject() {
        return this.userObj;
    }
    
}

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;

​