mobex,@inject 只有商店的特定部分

Ilj*_*lja 0 javascript reactjs mobx mobx-react

目前我正在使用 mobx <Provider store={store} />,其中 store 包括所有具有可观察对象的 mobx 存储类。

在组件内部我使用

@inject("store")
@observe
class MyComponent ....
Run Code Online (Sandbox Code Playgroud)

但这意味着,如果我只想访问通知存储,我必须使用this.props.store.notification.message它,例如,这变得非常冗长。有没有办法只获取通知存储?当我们注入一个字符串"store"而不是对象时,我看不到破坏它的方法。

Evg*_*kin 5

决定将其发布为答案,因为它可能对其他人有所帮助:

如 mobx-react ( https://github.com/mobxjs/mobx-react )的文档所示,Provider 可以接受您传递给它的任何属性,而不仅仅是“存储”。

因此,解决方案是创建一个带有 store 的对象,并将它传递给带有 spread 运算符的 Provider(或任何其他你觉得舒服的方式)。

const stores = { 
     storeOne,
     storeTwo,
}

return (
   <Provider {...stores}>
      <MyComponent />
    </Provider>
)
Run Code Online (Sandbox Code Playgroud)

如果您使用 mobx-react 包并想要注入多个商店 - 只需将商店传递给以逗号分隔的@inject 函数

@inject('storeOne', 'storeTwo')
Run Code Online (Sandbox Code Playgroud)

我创建了一个带有多个商店注入示例的笔:https : //codepen.io/evgen/pen/NgpVMw