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

Question

有一个对象具有可观测的属性。自动运行很好。

我想克隆一个新的对象，但是自动运行不能工作。

这是我的代码：

Step1：

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

Step2：

节点--实验模块roadStore.mjs

您可以看到自动运行3次(1 init +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

非通信网络lin18

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)

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


// clone

setTimeout(() => {
  target.data[0].name = 'timeout1'
}, 1000)
setTimeout(() => {
  target.data[0].name = 'timeout2'
}, 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

Answer 1

用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)