react中使用mobx狀態管理

中文文檔：https://suprise.gitbooks.io/mobx-cn/content/refguide/api.html

安裝 Mobx

cnpm install mobx -S
cnpm install mobx-react -S

使用兩個 Babel 插件，支持ES6裝飾器語法

cnpm install @babel/plugin-proposal-decorators -D
cnpm install @babel/plugin-proposal-class-properties -D

在 package.json / babel相關配置如下：

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
}

 如果開啓了eslint就添加eslintConfig：

"parserOptions": {
   "ecmaFeatures": {
   "legacyDecorators": true
   }
 }

 項目下創建store/index.js (一般以頁面名稱命名，一個頁面一個狀態文件)：

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


class AppStore {
    @observable time = '2019'
    @observable todos = []
    @computed get desc() {
        return `${this.time} 還有 ${this.todos.length} 條任務待完成`
    }
    @action addTodo(todo) {
        this.todos.push(todo)
    }
    @action deleteTodo() {
        this.todos.pop()
    }
    @action resetTodo() {
        this.todos = []
    }
    @action getNow() {
        this.time = moment().format('YYYY-MM-DD HH:mm:ss')
    }
}


const store = new AppStore()

setInterval(()=>{
    store.getNow()
}, 1000)

export default store

在main.js（配置最外層組件的地方）傳入store：

import React from 'react'
import { Provider } from 'mobx-react'
import store from './store'
import Home from './pages/home'

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

export default App;

頁面組件中使用：

import React from 'react'
import {
    inject,
    observer
} from 'mobx-react'
import './style.css'

@inject ('store') @observer
export default class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    handleTodos(type) {
        let { store } = this.props
        switch (type) {
            case 'add':
                store.addTodo('一條新任務')
                break;
            case 'delete':
                store.deleteTodo()
                break;
            case 'reset':
                store.resetTodo()
                break;
            default:
        }
    }
    render() {
        let { store } = this.props
        return(
            <div className='home'>
                <h1>在React中使用mobx</h1>
                <div>{store.desc}</div>
                <button onClick={this.handleTodos.bind(this,'add')}>添加一條任務</button>
                <button onClick={this.handleTodos.bind(this,'delete')}>刪除一條任務</button>
                <button onClick={this.handleTodos.bind(this,'reset')}>任務重置</button>
                {
                    store.todos.map((ele,index,arr) => {
                        return(
                            <div key={index}>{ele}</div>
                        )
                    })
                }
            </div>
        )
    }
}