在香草ES6 Javascript类中访问MobX存储

这是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类中,如何获得相同的结果?

解决方法:

MobX GitHub帐户中由adonis-work找到的答案.给出答案:

将商店导出为单例:

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

上一篇:javascript – mobX – 过滤国家的反应原生?


下一篇:javascript – MobX – 当我将数据注入React组件时可以使用`inject`时,我为什么要使用`observer`