Javascript MobX自动运行和构造函数内部的反应

自动运行和反应是否必须在构造函数内部才能工作？ 我能写这个没有构造函数的简单例子吗

另外，我在自动运行中的代码运行正常，但如果我将其更改为

console.log（this.expenses）

则无法运行。为什么呢

import { observable, action, computed, useStrict, autorun, reaction } from 'mobx'
useStrict(true)

class ExpensesStore {

  @observable.shallow expenses = []

  @action addExpense = (expense) => {
   this.expenses.push(expense)
  }

  @computed get getExpense() {
    if(this.expenses.length > 0) {
      return `This is computed from ${this.expenses[0] + this.expenses[1]}`
    }

  }


  constructor() {
    autorun(() => {
      console.log(`${this.expenses}`)
    })

    reaction(
      ()=>this.expenses.map(expense => expense), expense => console.log(expense)
    )
  }


}

const store = window.store= new ExpensesStore()

export default store

---

自动运行和反应不必在构造函数中。例如，如果您愿意，您可以这样做：

示例

class ExpensesStore {
  @observable.shallow expenses = []

  @action addExpense = (expense) => {
   this.expenses.push(expense)
  }

  @computed get getExpense() {
    if(this.expenses.length > 0) {
      return `This is computed from ${this.expenses[0] + this.expenses[1]}`
    }
  }
}

const store = new ExpensesStore()

autorun(() => {
  console.log(`${store.expenses}`)
})

reaction(
  () => store.expenses.map(expense => expense), expense => console.log(expense)
)

console.log（`this.expenses}`）

起作用而

console.log（this.expenses）

不起作用的原因是，在编写

this.expenses

时，您没有取消对浅数组中任何内容的引用

当你写

`${this.expenses}`

。。。您正在

this.expenses

上隐式调用

toString（）

。当不将其放入字符串时，可以使用或

切片

获得相同的效果：

示例（）

---

Thx Thole。考虑到console.log，我看到了我的错误。所以，如果autorun和reaction不需要任何装饰程序，并且可以生活在课堂费用存储区之外，我可以将它们取出，放在其他组件中，然后从那里运行它们。是否有一种方法可以采取行动并将其计算出来。我想制作一个类似于redux的结构，在这里我将在一个文件中有操作，在另一个文件中存储？@Igor Vuk没问题！当然，MobX非常灵活。在这种情况下，我个人会保留类上的computed，但移动操作。不久前我自己在一个项目中这样做了，它感觉像是一个很好的、可变的Redux版本。我如何做到这一点，从另一个文件中取出操作并发送它们？我问了另一个问题，你是否想加入。我会接受这个答案作为我第一个问题的解决方案。Thx.@Thole如果新实例是在一个单独的地方实例化的，比如在根存储中，该怎么办？你会把自动运行放在哪里？

class ExpensesStore {
  @observable.shallow expenses = []

  @action addExpense = (expense) => {
   this.expenses.push(expense)
  }

  @computed get getExpense() {
    if(this.expenses.length > 0) {
      return `This is computed from ${this.expenses[0] + this.expenses[1]}`
    }
  }
}

const store = new ExpensesStore()

autorun(() => {
  // store.expenses.slice() works just as well
  console.log(toJS(store.expenses))
})

reaction(
  () => store.expenses.map(expense => expense), expense => console.log(expense)
)

setTimeout(() => {
  store.addExpense(1000)
}, 1000)