mobx在hooks中使用

创建仓库还是和之前一样，在 store/index.js 中

import { observable } from "mobx";

class store {
    @observable a = "1154545";
    @observable count = 1;

    @action
    setCount = () => {
        this.count++;
    }    
}
export default store;

1. 注入store，这样既可以在class中使用，也可以在hooks中使用了

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


  

　　在class中使用

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

@inject('store')
@observer
class Demo1 extends Component { 
    render() {
        return 
{this.props.count}
    }
}

　　在hooks中使用

import React from 'react';
import { useObserver, Observer, useLocalStore } from 'mobx-react';
import {store } from './store';

// 方法1
function Demo2() { 
    const localStore = useLocalStore(() => store);
    return useObserver(() => 
{localStore.count}
)
}

// 方法2，更新Observer包裹的位置，注意这里包裹的必须是一个函数
function Demo3() { 
    const localStore = useLocalStore(() => store);
    return {() => {localStore.count}}
}