Don't destructure

MobX observables are objects only. When destructuring, any primitive variables will remain at latest values and won't be observable anymore. Use boxed observables to track primitive values exclusively or preferrably pass a whole state object around.

  1. // do NOT do this, it breaks reactivity
  2. const {
  3.   userCateStore: { activeUserCate },
  4. } = useRootStore()
  5. const localStore = useLocalStore(() => ({
  6.   get dataSource() {
  7.     return activeUserCate
  8.   },
  9. }))

In such case you can either wrap a whole component to observer or destructure only down to nearest parent.

  1. const { userCateStore } = useRootStore()
  2. const localStore = useLocalStore(() => ({
  3.   get dataSource() {
  4.     return userCateStore.activeUserCate
  5.   },
  6. }))