代码之家 › 专栏 › 技术社区 › Charles Okwuagwu

绑定到getter的计算属性在按键从Vuex状态对象中删除项时不会更新

vuex vue.js

Charles Okwuagwu · 技术社区 · 6 年前

我有一个简单的商店:

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开发工具中进行验证,但vue组件中的计算属性看不到更新:

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

2 回复 | 直到 6 年前

Wang Sheng 6 年前

正如其他人在注释中所述,如果仅使用 obj.newProperty = 1 或 obj['newProperty'] = 1 或 delete obj.unwantedProperty Vue.set 和 Vue.delete https://vuejs.org/v2/api/#Vue-set

原因是,当通过改变其值来修改对象的现有属性时,通过属性的SETTER方法进行修改,并且在SETTER方法中,VUE将通知“取决于”此属性的所有事物(组件、计算属性等),以更新自身。

例如,如果你有 vm.a = 1 你有一个计算属性叫做 b 乙 被评估为 vm.a + 1 乙 取决于 a 根据需要 一 提出它的价值。当你改变 一 喜欢 vm.a = 2 乙 更新。

删除Vue ),您不会调用它的setter,并且此属性依赖项不会得到通知,因此它们不会自我更新。

一些额外的故事-Vue怎么知道什么取决于什么? 使用前面的示例,当Vue初始化时,它将为其数据创建getter和setter。在本例中,它为 vm.a . 乙 ,记住, 乙 是 . 在 乙 我们会打电话给 ,事实上,我们正在打电话 虚拟机 的getter方法。在这个getter方法中,我们知道 乙 虚拟机 我们登记作为 一 的依赖关系。

mickaelw 6 年前

Vuex提供帮助程序 mapGetters : ( https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper )

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

之后,您可以像在HTML模板中计算一样使用它:

{{ admins }}

或者在组件脚本中:

this.admins

推荐文章

matthew · 如何检索存储状态的新旧值

7 年前

dendog · 如何在Vuex状态创建中使用函数

7 年前

Thuan Nguyen · 使用vuex更新数据

7 年前

MaratSR · 在vuex中创建操作的正确方法

7 年前

dendog · 动态填充Vuex状态

7 年前

Andriy Stolyar · 如何在Vuex存储区已经创建之后手动将其添加到Vuex存储区?

7 年前

Cameron · 数据显示在websocket响应中,但未显示在已解决的promise中

7 年前

cmasri · vue test utils:如何在mounted()生命周期挂钩中测试逻辑(使用vuex)?

7 年前

EmacsVI · Vue good表格在填充后不会显示“emptystate”

7 年前

pirmax · VueJS-VueX和flash消息

7 年前