Question

我喜欢MobX。我想在原生JavaScript中使用它。我尝试添加CDN https://cdnjs.com/libraries/mobx 然后我尝试用MobX语法编写一个类：

class MyStore {
  @observable data = 'foo'
}
const myStore = new MyStore();

但我收到错误：

SyntaxError: illegal character

代表@和：

ReferenceError: exports is not defined

来自mobx.js个文件。

所以没有React并且没有Blunding / Transpiler似乎不可能，是吗？如果没有替代品？

谢谢！

Answer 1

是的，您可以在没有React的情况下使用MobX，但在您的示例中，您使用了属于ES.Next的装饰器语法，并且浏览器本身不支持它，并且需要一个转换器（例如，Babel）。 p>

如果您想在没有装饰器的浏览器中直接使用MobX，这些说明对您有用：https://mobx.js.org/best/decorators.html

Answer 2

正如@ someone235所说，这是有可能的。

向您展示，这是一个没有任何反应的例子：https://jsfiddle.net/Lrt9pky4/

这是代码，虽然我无法在SO中启用装饰器，因此以下示例不起作用。链接确实有效。

const {observable, computed, autorun} = mobx;
class MyStore {
  @observable data = 'foo'
}
const myStore = new MyStore();      
autorun(()=> {
console.log(myStore.data);
document.getElementById('log').innerHTML += myStore.data + "<br />"
})

myStore.data = 'bar'

<script src="https://unpkg.com/mobx@3/lib/mobx.umd.js"></script>
<body>
  Log
  <hr/>
  <div id="log">
  </div>
</body>

您可以使用自动运行和观察/拦截方法接收来自更改的通知，但您必须自己编写所有其他代码。（正确地对这些变化做出反应，打算开启。）

Answer 3

不需要装饰者。您可以尝试使用Mobx 4方法：

import { decorate, observable} from "mobx"
class MyStore {
  data = 'foo'
}
decorate(City, {
    data: observable,
})
const myStore = new MyStore();

此处有更多详情https://medium.com/@mweststrate/mobx-4-better-simpler-faster-smaller-c1fbc08008da

是否可以在没有React的情况下使用MobX？

3 个答案: