Vuex changes not impacting modules

Question

I have a UserDialog component which leverages a part of the Vuex state-tree to determine whether it should display itself or not:

import { Component, Prop, Vue } from 'vue-property-decorator';
import { State, Getter, Mutation, Action, namespace } from 'vuex-class';
import { fk } from 'firemodel';
import { User } from '@/models/User';
const Users = namespace('users');

@Component({})
export default class UserDialog extends Vue {
  @Prop() public id!: fk;
  @Users.State public show: fk;
  @Users.Getter public selectedUser: User;
  @Users.Mutation public HIDE_USER_PROFILE: () => void;

  public get showDialog() {
    return this.show === undefined ? false : true;
  }

}

From the parent component I am calling Vuex's commit('SHOW_USER_PROFILE', id) and thereby setting this ID it should update the UserDialog's show property accordingly.

I can see very clearly that the Vuex store has received the call to SHOW_USER_PROFILE and that indeed has updated the state in the state tree (this is through the Vue Developer plugin in the browser). But then when I switch over to the UserProfile component I see that it still has not received the state update.

Note: if I reload the page (aka, CMD-R) after having set the UserID I want to highlight, it reloads the components and because I'm using veux-persist, the ID is still set in the state tree. At this point the component DOES receive the correct state but when relying on the normal reactivity system it just doesn't work.

Can anyone help?

---

for additional context, here are a few more modules:

Store Definition::

export default new Vuex.Store<IRootState>({
  modules: {
    packages,
    users,
    searchCriteria,
    snackbar
  },
  plugins: [FireModelPlugin, localStorage.plugin]
});

Users Mutations:

const mutations: MutationTree<IUsers> = {
  selectUser(state, id: fk) {
    state.selected = id;
  },
  SHOW_USER_PROFILE(state, id: fk) {
    state.show = id;
  },
  HIDE_USER_PROFILE(state) {
    state.show = undefined;
  }
};

---

I have added a computed property to the UserDialog component above:

public get userId() {
  return this.$store.state.users.show;
}

There was a thought that maybe this would be reactive whereas the @Users.State decorated show property was not. Unfortunately, they both perform exactly the same.

Answer 1

@Derek and I talked last night and realized that the cause of this problem was due to the state transitions to "undefined" which the current Reactive system does not handle (it should be fine when we get to Vue-NEXT with Object Proxies). The remaining code works just fine when I switch out the state transition from: undefined → string → undefined to null → string → undefined.

Many thanks to @Derek for spending the time.