如何使用下面的文件结构访问Mobx存储

Question

假设我有这个.jsx文件，它基本上包含了我现有的所有存储。

user-access.jsx

import { observable, action, computed } from 'mobx';
export default new class UserAccess{
   @observable page_access = [];
}

stores.jsx

import { UserAccess } from './stores/user-access';

const stores = {
    "UserAccess" : UserAccess,
};

export default stores;

index.jsx

import stores from './stores';

ReactDOM.render(
 <Provider stores = { stores } >
     <Router .... />
 </Provider>

我想在我的组件中访问它，我怎么做呢？这就是我到目前为止所拥有的。

@inject('stores') @observer
export default class PageHeader extends React.Component{
........

}

如何访问可实现的page_access，以及如何将存储本身注入到组件中？

Answer 1

你好像已经注射好了。你可以从道具上进入注射的商店。只要您有观察者装饰师，组件就会自然地对商店中的变化做出反应。

我看到了一些小问题，我不确定这些问题是否与复制粘贴有关(您在用户访问中导出默认类，但导入一个命名的实例？)但是，假设这些东西正常工作，下面的代码应该可以工作。

@inject('stores') @observer
export default class PageHeader extends React.Component{
  render() {
    console.log(this.props.stores.UserAccess)
  }
}