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 组件时，我看到它仍然没有收到状态更新。

  

注意：如果在设置了我要突出显示的用户ID后重新加载页面（又名CMD-R），它将重新加载组件，并且由于我使用的是veux-persist， ID仍在状态树中设置。此时，组件确实收到了正确的状态，但是当依赖于正常的反应系统时，它就无法正常工作。

有人可以帮忙吗？

---

有关其他上下文，这里还有更多模块：

商店定义：：

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

曾经有人认为这可能是反应性的，而装饰@Users.State的{​​{1}}属性却不是。不幸的是，它们的性能完全相同。

Answer 1

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

非常感谢@Derek花费了时间。

Answer 2

在上面的示例中，您直接调用Vuex状态存储。当您从组件中执行此操作时，这是一笔交易。状态存储区不会反应，并且永远不会告诉您的computed属性它已更改。

获得所需反应性的正确方法是实施Vuex getters：

const store = new Vuex.Store({
  state: {/*...*/},
  getters: {
    show(state) {
      return state.show;
    }
  }
})

然后在您的组件中：

computed: {
  show() {
    return this.$store.getters.show;
  }
}

在此处了解有关Vuex getters的更多信息：https://vuex.vuejs.org/guide/getters.html