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

MobX GitHub adonis-work帐户中的答案https://github.com/mobxjs/mobx/issues/605。引用答案：

将商店导出为单身人士：

// 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)

我现在正在使用这种方法一段时间没有问题。有什么警告我应该留意吗？

链接到来源：{{3}}

Answer 2

您忘记了代码以：

开头

"python.linting.pylintArgs": [
    "--variable-rgx=[a-z_][a-z0-9_]{1,30}$"
]

这里有商店变量，您可以在任何地方

使用它

如果您愿意，可以更方便地将商店变成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/>置于其反应上下文中，在此处阅读更多：https://reactjs.org/docs/context.html。

这意味着商店位于 {/ 1}}的每个子反应组件中。注入只是复制它：Store。

因此，在你的'普通'javascript类（没有反应子类/组件）中创建单例并使用这个单例也是一样的。

在vanilla ES6中访问MobX商店Javascript类

2 个答案:

如何运作