Question

请问我们如何在Vuex状态对象中通过键删除项目，并且仍然具有绑定到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或obj['newProperty'] = 1或delete obj.unwantedProperty，Vue将无法检测到属性的添加或属性的删除。您需要按照https://vuejs.org/v2/api/#Vue-set

所述使用Vue.set和Vue.delete

原因是，当您通过更改对象的值来修改其现有属性时，可以通过该属性的setter方法进行修改，并且在setter方法中，Vue会通知所有事物（组件，计算属性等） “依赖”此属性，以进行自我更新。

例如，如果您有vm.a = 1并且有一个名为b的计算属性，并且b的计算方式类似于vm.a + 1，那么我们说b取决于在a上，因为它需要a才能得出其值。当您像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的依赖项。

Answer 2

Vuex提供了一个助手mapGetters：（https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper）

该帮助器可用于Vue Component的计算字段，如下所示：

computed: {
  ...mapGetters([
     'admins',
     'managers',
     'counters'
  ])
}

之后，您可以像在HTML模板中计算出的那样使用它：

{{ admins }}

或在组件脚本中：

this.admins

它直接连接到Vuex的商店，因此当商店更新时，创建的计算将是反应性的。

绑定到吸气剂的计算属性不会在通过键从Vuex状态对象删除项时更新

2 个答案: