javascript - MobX，有没有办法在与相关组件相同的文件中定义域存储？

Question

我觉得我错过了什么。

• 我可以实例化一个商店，并让它在挂载时实例化一个组件链。
• 我可以从文件导入商店，然后在组件中引用它。
• 我可以创建一个提供者并将其注入(inject)到一个组件中。
• 我可以使用上下文并以这种方式传递它。

但是:

• 为什么我不能在一个文件的顶部创建一个存储，把所有的逻辑放在里面，然后在它下面制作我想要的所有那些小的无状态组件，而不必使用一个单独的文件？没有任何方法可以引用商店并将其传递给同一个文件中的链式店吗？说我老套，但我喜欢“简单、可读、封装和可维护”。

我尝试过的所有方法都使 render() 方法无法引用商店。

在此先感谢您帮助洗白我的无知哈哈。

Answer 1

我认为为商店(甚至组件)使用分离的文件有很多好处，它可以帮助您的代码变得更加可重用，在我看来更清晰易读，但是，我想这取决于个人意见和使用情况。

您实际上可以将所有内容写在一个地方，您需要定义所有商店类，并为每个商店类创建一个实例，您将在组件中使用该实例。

以下是您如何操作的示例:

import React from 'react'
import { observable } from 'mobx'
import { observer } from 'mobx-react'

// Define the store(s)
class TestStore {
    @observable arrayTest = ["Item", "Another item"];

    constructor() {
        // More MobX stuff...
    }
}

// Create an instance for each store, to be used in components
let testStore = new TestStore();


// Define the component(s)
@observer
class Test extends React.Component {
    constructor(props) {
        super(props)
    }


    render() {
        // Using the store instance we defined above
        let { arrayTest } = testStore;

        return <div>
            {arrayTest.map(item => <p>{item}</p>)}
        </div>
    }
}