在vanilla 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

這個怎么運作

<Provider/> react組件將Store置於其反應環境中，請在此處閱讀： https ： //reactjs.org/docs/context.html 。

這意味着商店在<Provider/> 每個孩子反應組件中。 注入只是復制它： this.props.store = this.context.mobx.store 。

因此，在“普通”javascript類（沒有反應子類/組件）中創建單例並使用此單例也是一樣的。