web-dev-qa-db-ja.com

Vuexストアの更新後に計算値が更新されないのはなぜですか？

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は空です）

vue.jscomputed-propertiesvuex
16
Édouard Lopez

次の行が原因です：optboxes[index] = {...optboxes[index], printers: printers }。

Vueでは監視できない のインデックスでアイテムを直接設定しています

配列から古いアイテムをスプライスして、新しいアイテムをプッシュしてみてください。

19
bartlomieju

あなたはこれを行うことができます：

Vue.set(optboxesList[index], 'printers', printers )
10
Gabriel Robert