Hello, could it works with array?

[fy0]

I tried use mobx-vue-lite in a project, this is my code:

export const useGlobalObservable = createGlobalObservable(() => {
  return useLocalObservable(() => ({
    test: observable([] as number[]),

    async doFetch() {
      runInAction(() => {
        this.test.push(1)  
      })
    }

  }))
})

In vue component:

<template>
  <observer>
    {{ state.test }}
  </observer>
</template>

<script lang="ts" setup>
import { computed, onBeforeMount, onBeforeUnmount } from 'vue';
import { useGlobalObservable } from '../store'
import { Observer } from 'mobx-vue-lite'

const state = useGlobalObservable()

onBeforeMount(async () => {
  await state.value.doFetch()

  setInterval(() => {
    console.log('fetch log')
    state.value.doFetch()
  }, 5000) as any
})
</script>

It seems not work at all. Am i did a wrong step?

[fy0]

well, use Observer component instantly can works:

store.ts:

class A {
  @observable
  test: number[] = []

  constructor() {
    makeObservable(this)
  }

  @action
  addTest() {
    this.test.push(1)
  }
}

export const s = new A()

test.vue:

<template>
  <observer>
    {{ state.test }}
  </observer>
</template>

<script lang="ts" setup>
import { s } from '../store'
import { Observer } from 'mobx-vue-lite'

onBeforeMount(async () => {
  setInterval(() => {
    console.log('fetch log')
    s.addTest()
  }, 5000) as any
})
</script>

[iChenLei]

@wobsoriano Any suggestion ?

[wobsoriano]

Should be working now. Please update. Need to make the return value of useLocalObservable to a non-readonly