如何在没有装饰器的情况下重写此js类

Question

我想不使用装饰器就使用mobx。通常，我使用mobx软件包中的decorate，但是在这种特殊情况下，我找不到使它工作的方法。

原始代码：

import { observable } from 'mobx'
import { create, persist } from 'mobx-persist'

class Order {
  @persist('object')
  @observable
  currentOrder = null
}

我尝试过的事情：

import { observable, decorate } from 'mobx'
import { create, persist } from 'mobx-persist'
import { compose } from 'recompose'

class Order {
  currentOrder = null
}

decorate(Order, {
    currentOrder: compose(persist('object'), observable),
})

错误来自persist，该错误告诉串行器装饰器未正确使用。 知道为什么这不同于上面并且不起作用吗？

Answer 1

TL; DR

属性装饰器需要非常具体的组合实现。

解决方案演示：

完整答案

属性装饰器基本上是以下形式的函数：
(target, prop, descriptor) => modifiedDescriptor

因此，要组成两个Property Decorator，您需要将第一个装饰器的结果作为 2nd装饰器的第三个参数传递（以及{{1 }}和target）。

Recompose.compose（与lodash.flowRight相同）从右到左应用函数，并将结果作为单个参数传递给下一个函数。

因此，您不能使用prop来组成装饰器，但是可以轻松地为装饰器创建一个作曲器：

Recompose.compose

然后我们使用它来组成/* compose.js */ export default (...decorators) => (target, key, descriptor) => decorators.reduce( (accDescriptor, decorator) => decorator(target, key, accDescriptor), descriptor ); 和observable。

persist("object")

[21/8/18] MobX /* Order.js */ import { observable, decorate, action } from "mobx"; import { persist } from "mobx-persist"; import compose from "./compose"; class Order { currentOrder = null; } export default decorate(Order, { currentOrder: compose( observable, persist("object") ) }); 和>=4.3.2的更新：

我为MobX5和MobX4打开了PR（已合并），以便在>=5.0.4实用程序功能中支持多个装饰器OOB。
因此，这在MobX decorate和>=4.3.2中可用：

>= 5.0.4

Answer 2

更简单的解决方案是

class Stuff {
   title = ''
   object = {
      key: value
   }
}

decorate(Todo, {
    title: [persist, observable],
    object: [persist('object'),observable]
})

无需安装serializr软件包。以上功能是mobx持久性内置的。