如何使用下面我的文件结构访问 Mobx Store

Question

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

用户-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{
........

}

如何访问 obervable page_access 以及如何将商店本身注入我的组件？

Answer 1

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

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

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

How to access Mobx Store using my file structore below