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 store已经接收到了SHOW_USER_PROFILE的调用，并且确实已经更新了状态树中的状态（这是通过浏览器中的Vue Developer插件完成的）。但是，当我切换到UserProfile组件时，我发现它仍然没有接收到状态更新。

注意：如果在设置要突出显示的UserID后重新加载页面（即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装饰的show属性却不是。不幸的是，它们都执行完全相同。

- ken

---

请提供所有相关代码，包括您的 Vuex 模块。 - Derek Pollard

是的，当代码库较大时，这通常会很困难，但我现在会尝试添加更多上下文。 - ken

看起来你没有从 Vuex 中响应式地获取状态，你所做的更像是定义一次然后永远不再更新。相反，使用 computed 属性来响应式地获取 Vuex 状态。 - Derek Pollard

我的理解是，使用 vuex-class 定义时，你会在类上获得一个响应式属性，但这可能是错误的。如果不是这种情况，我认为 Getter 装饰器有点危险。 - ken

该 getter 应是响应式的，但您使用了 this.show 而非 getter。 - Derek Pollard

Answer 1

昨晚我和Derek聊天后发现这个问题的原因是由于状态转换成了“undefined”，而当前的响应式系统无法处理它（当我们使用对象代理进入Vue-NEXT时，应该可以解决这个问题）。当我将状态从 undefined → string → undefined 更改为null → string → undefined 时，其余代码都能正常工作。

非常感谢Derek花费时间。

- ken

---

谢谢！我遇到了完全相同的问题，使用 null 替代 undefined 修复了它。我的建议是：在使用vuex时避免使用 undefined。 - developius

Answer 2

在上面的例子中，您直接调用了Vuex状态存储。当您从组件中这样做时，这是一个一次性的获取交易。状态存储不是响应式的，它永远不会告诉您的计算属性已更改。

获得您所期望的响应性的正确方法是实现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

- Henrik B. Gundersen

---

这是错误的，计算属性中的任何内容都是响应式的，只要其源数据是响应式的。 - Derek Pollard