Pourquoi la valeur calculée n'est-elle pas mise à jour après la mise à jour du magasin vuex?

Question

J'ai obtenu une propriété calculée printerList qui devrait être réévaluée après la résolution de getPrinters(), mais il semble que ce ne soit pas le cas.

les sources sont en ligne : optbox.component.vue , vuex , optboxes.service.js

Composant

<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

Pourquoi la propriété calculée printerList n'est-elle pas réévaluée (c.-à-d. La v-for est vide)

Answer 1

Cela est dû à cette ligne: optboxes[index] = {...optboxes[index], printers: printers }.

Vous définissez directement l'élément avec l'index, qui ne peut pas être observé par Vue

Essayez d'épisser l'ancien élément du tableau et de pousser le nouveau.

Answer 2

Vous pouvez faire ceci:

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