vue.js - 绑定(bind)到 getter 的计算属性在从 Vuex 状态对象中按键删除项目时不会更新

Question

请问我们如何在 Vuex 状态对象中通过键删除项目，并且仍然让绑定(bind)到 getter 的计算属性自动更新？

我有一个简单的商店:

const state {
  users: {} // object of objects keyed by userid
}

const getters {
  admins: state => Object.values(state.users).filter(o => o.role === 'administrator'),
  managers: state => Object.values(state.users).filter(o => o.role === 'manager'),
  counters: state => Object.values(state.users).filter(o => o.role === 'counter'),
}

const mutations {
  DELETE_USER (state, userid) {
    delete state.users[userid] // the user id deleted, i can verify this in dev-tools
  }
}

用户已被删除，我可以在 vue dev-tools 中验证这一点，但我的 vue 组件中的计算属性看不到更新:

...
  computed: {
    admins: this.$store.getters('admins'),
    managers: this.$store.getters('managers'),
    counters: this.$store.getters('counters')
  },

Answer 1

正如其他人在评论中所说，如果您仅使用 obj.newProperty = 1，Vue 无法检测属性的添加或删除。或obj['newProperty'] = 1或delete obj.unwantedProperty 。您需要使用Vue.set和Vue.delete如此处所述https://v2.vuejs.org/v2/api/#Vue-set

原因是，当你通过改变一个对象的值来修改它的现有属性时，你是通过该属性的setter方法进行修改的，并且在setter方法中，Vue会通知所有该改变的东西(组件、计算属性等) “取决于”此属性，以更新自身。

例如，如果您有 vm.a = 1并且您有一个名为 b 的计算属性和b评估如下 vm.a + 1 ，然后我们说 b取决于a根据需要a来得出它的值(value)。当你改变 a喜欢 vm.a = 2 ，你隐式调用a的setter方法，这个方法会通知b更新。

但是，如果您删除某个属性(不使用 Vue.delete )，则不会调用其 setter ，并且该属性依赖项将不会收到通知，因此它们不会自行更新。

一些额外的故事 - Vue 如何知道什么取决于什么？ 使用我们之前的示例，当 Vue 初始化时，它将为其数据创建 getter 和 setter。在本例中，它为 vm.a 创建 getter 和 setter。 。 然后 Vue 尝试评估 b ，并记住，b是 vm.a + 1 。期间b的评价，我们会调用vm.a ，事实上，我们正在调用 vm.a的 getter 方法。在这个 getter 方法中，我们知道 b的评价依据vm.a我们注册b如a的依赖性。