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';

<Provider store={store}>
  <Demo />
</Provider>

   

  在class中使用

  

复制代码
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

@inject('store')
@observer
class Demo1 extends Component { 
    render() {
        return <div>{this.props.count}</div>
    }
}
复制代码

  

  在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(() => <div onClick={localStore.setCount}>{localStore.count}</div>)
}

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

 

posted @   Tommy_marc  阅读(538)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示