Как в vuex изменять динамические данные в другом компоненте?

Question

[polzovatel_vue]

У меня такой вопрос. Есть action который принимает данные через websocket и отправляет через мутацию в 2 разных state.
Каждый компонент принимает свой state.
В одном компоненте, который запускает action, данные динамически меняются, в другом компоненте данные меняются если только обновить компонент, хотя в консоль данные успешно летят

Как сделать, чтобы они так же обновлялись так же динамически в другом компоненте?

actions: {
        play(ctx, array){

             axios.get('http://localhost/task_run?task_id='+array.id)
            var conn = new WebSocket('ws://localhost:8080', "protocol");
            conn.onmessage = function (ev) {
                ctx.commit('procent', {key:array.key, val:ev.data});
                ctx.commit('procentOne', {key:array.key, val:ev.data});
                console.log('Message: ', ev);
            };
        },
    },
    mutations: {
        procent(state, val){
            var array =  JSON.parse(val.val);
            state.process[val.key] = array.procent;
            state.processOnePersone[array.comp] = array.procent;
        }

    },
    state: {
        process: [],
        processOnePersone:[],
    },
    getters: {
        process(state){
            return state.process
        },
    processOnePersone(state){
            return state.processOnePersone;
        }
    }

<v-progress-circular
                                    :rotate="-90"
                                    :size="50"
                                    :width="5"
                                    :value="process[key]"
                                    color="primary"
                            >
                                {{ process[key] }}
                            </v-progress-circular>
             <script>
    import {mapGetters} from 'vuex';

    export default {
        name: 'taskListComponent',
        computed: {
            ...mapGetters(['process',]),
        },
    }

</script>

<v-progress-circular
                                    :rotate="-90"
                                    :size="50"
                                    :width="5"
                                    :value="processOnePersone[key]"
                                    color="primary"
                            >
                                {{ processOnePersone[key] }}
                            </v-progress-circular>
             <script>
    import {mapGetters} from 'vuex';

    export default {
        name: 'queueComponent',
        computed: {
            ...mapGetters(['processOnePersone',]),
        },
    }

</script>

Comments

[Игорь]

v-progress-circular это ваш компонент?

[polzovatel_vue]

Игорь, Это не компонент, это просто vuetify тег.
Компоненты работают через vue-router.
Но даже если просто вставить один компонент в другой, результат аналогичен

[Игорь]

polzovatel_vue, Ошибаетесь, v-progress-circular это как раз компонент из линейки vuetify

Answer 1

[Evgeny Kulakov]

Реактивность скорее всего не работает, попробуйте заменить вот это:

state.process[val.key] = array.procent;
state.processOnePersone[array.comp] = array.procent;

на

state.process.splice(val.key, 1, array.procent)
state.processOnePersone.splice(array.comp, 1, array.procent)

Я предполагаю, что val.key и array.comp - индексы массива

Comments

[polzovatel_vue]

Да, не работает реактивность, спасибо, все работает!

Answer 2

[polzovatel_vue]

Нашел еще один рабочий вариант:

Заменить это:

state.processOnePersone[array.comp] = array.procent;

на это:

Vue.set(state.processOnePersone, array.comp, array.procent);