vue.js - Vuex 更改不影响模块

Question

我有一个 UserDialog 组件，它利用 Vuex 状态树的一部分来确定它是否应该显示自己:

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;
  }

}

我从父组件调用 Vuex 的 commit('SHOW_USER_PROFILE', id) 并因此设置此 ID 应该更新 UserDialog的 show 属性相应。

我可以非常清楚地看到 Vuex 存储已经收到对 SHOW_USER_PROFILE 的调用并且确实已经更新了状态树中的状态(这是通过浏览器中的 Vue Developer 插件)。但是当我切换到 UserProfile 组件时，我发现它仍然没有收到状态更新。

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.

有人可以帮忙吗？

---

对于额外的上下文，这里有几个模块:

商店定义::

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

用户突变:

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;
  }
};

---

我在上面的 UserDialog 组件中添加了一个计算属性:

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

有人认为这可能是 react 性的，而 @Users.State 装饰的 show 属性不是。不幸的是，它们的表现完全相同。

Answer 1

@Derek 和我昨晚谈过，意识到这个问题的原因是状态转换为“未定义”，当前 Reactive 系统无法处理(当我们使用 Object 进入 Vue-NEXT 时应该没问题代理)。当我将状态转换从 undefined → string → undefined 切换到 null → string → undefined 时，其余代码工作正常。

非常感谢@Derek 花时间。