react的mobx使用

MobX 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能。 通过使用 @observable 装饰器(ES.Next)来给你的类属性添加注解就可以简单地完成这一切。

1. 定义一个mobx store

// ------------------TestStore.js-------------------
// 引入mobx相关模块
import { 
    makeObservable, 
    observable, 
    action,
    makeAutoObservable
} from 'mobx'

observable 可被观察的，用于定义可共享的数据，相当于是Vuex中的 state
action 相当于Vuex中的 mutations + actions，用于定义改变state的方法
特点强调：装饰器只是用来修饰class类及其属性和方法的

// ------------------TestStore.js-------------------
// [mobx 6]写法

// 写法1：指定可共享数据
export default class TestStore{
    constructor() {
        makeObservable(this, {
            list: observable,
            msg: observable,
            addList: action
        })
    }

    list = [
        {id: 1, task: '睡觉'},
        {id: 2, task: '吃饭'}
    ]
    msg = 'hello mobx 6'

    addList(payload) {
        this.list.push({
            id: Date.now(),
            task: payload
        })
    }
}


// 写法2：不指定，全部可用
export default class TestStore{
    constructor() {
        makeAutoObservable(this)
    }
    msg = 'hello mobx 6'
}

2. 规划总管理store库

实则为所有store的集合

 // -------------------index.js--------------- 
// 引入模块
import TestStore from './modules/TestStore'

class Store {
    // 在构造器中，对所有的子store进行实例化
    constructor() {
        this.test = new TestStore()
    }
}

export default new Store() // 实例化  store.test

3. 根组件设置

// ------------- App.js--------------
// 使用mobx状态管理数据
import { Provider } from 'mobx-react'
import store from '@/store'

export default class App extends React.Component {
	render () {
		return (
			<Provider store={store}>
				{要放入的组件}
			</Provider>
		)
	}

}

4. 组件内使用store

// -----------------Test.js--------------------
// 引入相关模块
import { observer, inject } from 'mobx-react'

inject 表示注入状态管理的数据
observer 观察者，当状态管理数据发生变化时，当前组件自动更新
注意两者先后顺序

无状态组件直接通过props接收，类组件则通过this.props接收，整体写法没有区别

// -----------------Test.js--------------------
@inject('store')
@observer
function Test(props) {
    console.log('store', props.store)
    const { test } = props.store
    comfirm() {
        test.addList({id: 3, task: '码代码'})
    }
    return (
        <div>
            <h1>todo</h1>
            <h1>总共有多少<span>{test.list.length}</span>条任务</h1>
            <button onClick={comfirm}>添加任务</button>
        </div>
    )
}

export default Test

// 注入和观察也可以在导出的时候简写成
// export default inject('store')(observer(Test))