Why is computed value not updated after vuex store update?

Question

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)

Does the `vuex` debugger show the correct values for `Printers`? For me, it rings an alarm that mutations are passing the state around instead of handling it by themselves. — , Aug 08 '16 at 01:08
@HectorLorenzo if you mean the vue devtools tool,yes, but it's not commited — Édouard Lopez, Aug 08 '16 at 07:20

score 31 · Answer 1 · edited Jun 20 '20 at 09:12

31

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 09 '16 at 13:31

bartlomieju

418
3
4

1

Splicing worked for me. For example, in my mutation: state.orders.splice(index, 1, payload) – Collin Thomas May 17 '20 at 22:51

score 18 · Answer 2 · answered Apr 08 '17 at 12:30

18

You could do this:

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

answered Apr 08 '17 at 12:30

Gabriel Robert

3,012
2
18
36

1

this is what fixed it for me. I was setting the state directly from within my mutations. Once I started using Vue.set then everything became magically reactive again – vesperknight Dec 25 '17 at 00:17

score 1 · Answer 3 · answered Jun 18 '20 at 10:07

1

you need force update

setPrinters(optboxes, optboxId, printers) {
    const index = this.getIndex(optboxes, optboxId);
    const newVal = {...optboxes[index], printers: printers }
    Vue.set(optboxes, index, newVal);
},

answered Jun 18 '20 at 10:07

Багдаулет Сайын

99
1
7

Why is computed value not updated after vuex store update?

Component

Actions

Mutations

Question

3 Answers3

Linked