在普通 ES6 Javascript 类中访问 MobX 存储

Question

这在 React 中是小菜一碟。如果您希望 MobX 存储在任何 React 组件中可用，您只需使用 mobx-react@inject组件即可。就像是：

import React from 'react';
import {inject} from 'mobx-react';

@inject('myStore')
class Dummy extends React.Component {

然后，我的商店可以作为道具使用：

this.props.myStore.myMethod();

不错，很方便……并且仅限 React。也许我错过了一些东西，但我找不到从普通 ES6 类访问我的商店的方法。如何在纯 Vanilla Javascript 的普通 ES6 类中获得相同的结果？

Answer 1

adonis-work在MobX GitHub帐户中找到了答案。引用一下答案：

将商店导出为单例：

// Store.js

import { observable, computed } from 'mobx'

class Store {
  @observable numClicks = 0
  @computed get oddOrEven() {
    return this.numClicks % 2 === 0 ? 'even' : 'odd'
  }
}

const store = new Store()

export default store

...使我们能够根据需要多次导入和使用应用程序中的任何位置的活动商店。

// Component.jsx

import store from Store

// use the global store in any component without passing it
// down through the chain of props from the root node

store.numClicks = 4
console.log(store.oddOrEven)

我使用这种方法已经有一段时间了，没有出现任何问题。有什么我应该注意的注意事项吗？

来源链接： https: //github.com/mobxjs/mobx/issues/605

Answer 2

您忘记了您的代码开头为：

import { Store } from "./store";
import { Provider } from "mobx-react";
import * as React from "react";
import { render } from "react-dom";

var store = new Store();
render(
        <Provider {...stores}>
            <Component />
        </Provider>,
        document.getElementById('root'),
    );

这里有你的存储变量，你可以在任何地方使用它

如果您希望更方便，请将您的商店变成Singleton

您可以将其导入到任何地方，例如：

import { Store, instance } from "./store";

//in store.ts/js
export Store... =
export const instance = new Store(); // your singleton

怎么运行的

React<Provider/>组件将其放入Store其 React Context 中，请在此处阅读更多信息： https: //reactjs.org/docs/context.html。

这意味着 store 存在于每个子 React 组件中<Provider/>。注入只是简单地复制这个：this.props.store = this.context.mobx.store。

因此，创建一个单例并在“普通”javascript 类（无反应子类/组件）中使用此单例是同一件事。