为什么在vuex存储更新后不更新计算值?

vue.js Vue.js

Tony小胖

2020-03-19

我得到了一个printerList计算后的属性,应在getPrinters()解决后重新评估,但看起来并非如此。

来源在线optbox.component.vuevuexoptboxes.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为空)

第2250篇《为什么在vuex存储更新后不更新计算值?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
JinJinSam 2020.03.19

这是由于以下行: optboxes[index] = {...optboxes[index], printers: printers }

您正在直接设置带有索引的项目,Vue无法观察到它

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android