如何动态更改另一个vuex组件中的状态?

时间:2019-12-20 08:18:28

标签: javascript vue.js websocket vuex vuetify.js

兄弟。 我对组件的状态有疑问。我有websocket,在我进入某种状态后,它有了一些变化。它可以组成一个组件,它动态改变值。但是,当我转到下一个组件(vue-router)时。状态变化很好,但不是动态变化。 hmmmmm ... console.log中的更改即将更改,但不会更改另一个组件中的值。

我该怎么做?

让我们看一些代码:

这是我的行动,女巫改变状态

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',]),
    },
}

它在哪里起作用

<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',]),
    },
}

0 个答案:

没有答案