如何克隆具有 observable 属性的对象并自动运行新对象的方法？

如何解决如何克隆具有 observable 属性的对象并自动运行新对象的方法？

有一个对象有一个可观察的属性。自动运行运行良好。

我想克隆一个新对象，但自动运行不起作用。

这是我的代码：

第一步：

vim roadStore.mjs

import mobx from 'mobx'
const { observable,autorun } = mobx
import ramda from 'ramda'
const { clone } = ramda
const roadStore = {
  data: observable([
    {
      name: "something",}
  ]),getData: function () {
    console.log(this.data[0].name);
  }
}

var target = (roadStore)
// var target = clone(roadStore) // line18.

autorun(() => {
  console.log('----autorun');
  target.getData()
})


// clone

setTimeout(() => {
  target.data[0].name = 'timeout1'
},1000)
setTimeout(() => {
  target.data[0].name = 'timeout2'
},2000)


export default roadStore

步骤 2：

node --experimental-modules roadStore.mjs

您可以看到自动运行 3 次（1 次初始化 + 2 次修改）

➜  ✗ node --experimental-modules src/store/roadStore.mjs
(node:43793) ExperimentalWarning: The ESM module loader is experimental.
----autorun
something
[MobX] Since strict-mode is enabled,changing (observed) observable values without using an action is not allowed. Tried to modify: ObservableArray@1[..].name
----autorun
timeout1
[MobX] Since strict-mode is enabled,changing (observed) observable values without using an action is not allowed. Tried to modify: ObservableArray@1[..].name
----autorun
timeout2

Step3：

评论 lin17

uncommnet lin18

import mobx from 'mobx'
const { observable,getData: function () {
    console.log(this.data[0].name);
  }
}

// var target = (roadStore)
var target = clone(roadStore)

autorun(() => {
  console.log('----autorun');
  target.getData()
})


// clone

setTimeout(() => {
  target.data[0].name = 'timeout1'
},2000)


export default roadStore

自动运行只运行一次，为什么？

➜  cp-side-panel git:(feat-cp-side-panel) ✗ node --experimental-modules src/store/roadStore.mjs
(node:44101) ExperimentalWarning: The ESM module loader is experimental.
----autorun
something

解决方法

使用 makeObservable 修复

const {makeObservable,observable,autorun} = require('mobx')
const {clone} = require('ramda')
var obj = {
  data: [
    {
      name: "something",}
  ],getData: function () {
    console.log(this.data[0].name);
  }
}


const target = clone(obj)

makeObservable(target,{
  data: observable,})



autorun(() => {
  target.getData()
})

setTimeout(() => {
  target.data[0].name = "new string"
},2000)