为什么 vuex 商店更新后计算值没有更新? [英] Why is computed value not updated after vuex store update?
问题描述
我得到了一个 printerList 计算属性，应该在 getPrinters() 解析后重新计算它，但它看起来不是.
资源在线:optbox.component.vue, vuex, optboxes.service.js
组件
<div v-for="printersList 中的打印机"><打印机 :printer="打印机" :optbox="optbox"></printer></模板><脚本>…created() { this.getPrinters(this.optbox.id);},计算:{打印机列表(){var index = optboxesService.getIndex(this.optboxesList, this.optbox.id);返回 this.optboxesList[index].printers}},Vuex:{动作:{ getPrinters:actions.getPrinters，}，吸气剂:{ optboxesList:getters.retrieveOptboxes}}<脚本>
操作
getPrinters({dispatch}, optboxId) {printers.get({optbox_id: optboxId}).then(response => {dispatch('setPrinters', response.data.optbox, response.data.output.channels);}).catch((错误) => {控制台错误(错误)；logging.error(this.$t('printers.get.failed'))});},突变
setPrinters(optboxes, optboxId, printers) {var index = this.getIndex(optboxes, optboxId);optboxes[index] = {...optboxes[index], 打印机:打印机 }},问题
为什么不重新计算 printerList 计算属性(即 v-for 为空)
这是由于这一行:optboxes[index] = {...optboxes[index], 打印机:打印机 }.
您是直接设置带有索引的项目，Vue 无法观察到
尝试从数组中拼接旧项并推送新项.
I got a printerList computed property that should be re-evaluated after getPrinters() resolve, but it look like it's not.
sources are online: optbox.component.vue, vuex, optboxes.service.js
Component
<template>
<div v-for="printer in printersList">
<printer :printer="printer" :optbox="optbox"></printer>
</div>
</template>
<script>
…
created() { this.getPrinters(this.optbox.id); },
computed: {
printersList() {
var index = optboxesService.getIndex(this.optboxesList, this.optbox.id);
return this.optboxesList[index].printers
}
},
vuex: {
actions: { getPrinters: actions.getPrinters,},
getters: { optboxesList: getters.retrieveOptboxes}
}
<script>
Actions
getPrinters({dispatch}, optboxId) {
printers.get({optbox_id: optboxId}).then(response => {
dispatch('setPrinters', response.data.optbox, response.data.output.channels);
}).catch((err) => {
console.error(err);
logging.error(this.$t('printers.get.failed'))
});
},
Mutations
setPrinters(optboxes, optboxId, printers) {
var index = this.getIndex(optboxes, optboxId);
optboxes[index] = {...optboxes[index], printers: printers }
},
Question
Why does the printerList computed property isn't re-evaluated (i.e. the v-for is empty)
It is due to this line:
optboxes[index] = {...optboxes[index], printers: printers }.
You are directly setting item with index, which can't be observed by Vue
Try splicing the old item from array and pushing the new one.
这篇关于为什么 vuex 商店更新后计算值没有更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
