装饰器不工作的原因是什么？(mobx)

Question

如果没有makeAutoObservable(this)函数，装饰器就不能工作。示例:组件

import { observer } from 'mobx-react-lite'
import useStore from 'hooks/useStore'

const Counter = props => {
  const { counterStore } = useStore()
  const { countValue } = counterStore
  console.log(counterStore)
  return (
    <div>
      <button>-</button>
      <p>{countValue} значение</p>
      <button onClick={counterStore.incrementCountValue}>+</button>
    </div>
  )
}

export default observer(Counter)

商店

import { action, observable } from 'mobx'

export default class CounterStore {
  @observable countValue = 0

  @action incrementCountValue = () => {
    this.countValue = this.countValue + 1
  }
}

如果使用makeAutoObservable(这)，所有的工作都很好。

Answer 1

从MobX 6开始，你必须在构造函数中调用makeObservable/makeAutoObservable。