4

I'm trying to get the value from the Vuex module state inside the mutation. But I'm always getting the Observer object instead of a real object.

@Module({
    namespaced: true,
    name: 'myModule',
    dynamic: true,
    store
})

export class MyModule extends VuexModule {
    public users: ArrayToObjMap<Users> = {};

    @Action
    public async initialize() {
      const fetchedUsers = await UsersService.getUsers();
      this.context.commit('setUsers', fetchedUsers);
    }

    @Mutation
    public setUsers(usersList: string[]) {
      this.users = GlobalUtils.mapIdsToItems(usersList, this.users)[0];
    }
}

Inside setUsers Mutation, the value of this.users is always Observer. I need to get the simple object to iterate through. I've already tried several solutions:

  1. JSON.parse(JSON.strinfigy(this.users)); => returns empty object
  2. cloneDeep(this.users); => returns empty object
Ismoil Shokirov
  • 2,213
  • 2
  • 16
  • 32
D.Mark
  • 537
  • 1
  • 11
  • 23
  • It's not a problem that it's Observer, this means it's reactive, this doesn't affect the result. You assigned `users` to be `{}`, not array, what do you expect? – Estus Flask Nov 03 '21 at 06:49
  • it should be an object, not array. When I'm trying to get access to object value via key, I'm always getting undefined (example: this.users['key']) – D.Mark Nov 03 '21 at 06:51
  • @EstusFlask for example Object.keys(this.users) returns empty array, but when I just console.log(this.users), I see all values – D.Mark Nov 03 '21 at 06:57
  • See https://stackoverflow.com/questions/23392111/console-log-async-or-sync . That it's reactive object shouldn't affect the result. In case the problem persists, please, provide a way to reproduce the problem. – Estus Flask Nov 03 '21 at 07:09

0 Answers0