为什么在 vuex store 更新后计算值没有更新？

Question

我有一个 printerList 计算属性，应该在 getPrinters() 解析后重新计算，但看起来不是。

来源在线： optbox.component.vue ， vuex ， optboxes.service.js

零件

<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>

动作

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'))
    });
},

突变

setPrinters(optboxes, optboxId, printers) {
    var index = this.getIndex(optboxes, optboxId);
    optboxes[index] = {...optboxes[index], printers: printers }
},

问题

为什么 printerList 计算属性没有被重新评估（即 v-for 是空的）

原文由 Édouard Lopez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是由于这一行： optboxes[index] = {...optboxes[index], printers: printers } 。

您直接设置带有索引的项目， Vue 无法观察到

尝试从数组中拼接旧项目并推送新项目。

原文由 bartlomieju 发布，翻译遵循 CC BY-SA 4.0 许可协议