从Component.vue变换Vuex Store数据数组

时间:2018-01-09 18:26:12

标签: javascript vue.js socket.io lodash vuex

我正在使用Vuex方法和Socket.io。
在我的主app.js内请求 Vuex 存储数据后,我尝试在自定义Component.vue内改变商店列表。

我想使用新值item.priority变更/替换Critical的对象项<i class="icon-priority critical" title="Critical"></i>,并在 Component.vue 中显示最终的变异列表

问题在于,每次更新Vuex列表时,都会重新运行整个computed()方法而不是特定的一个项目,因为重新运行this.mutateColumnPriority()没有项目。

我相信有更明智的方法吗?

app.js:

...
mounted() {
    // Call an action to update the Store state
    this.updateItemsAction(); // <-- This function updates a Store list which is used in Component.vue
}

Component.vue:

// Mutate the acquired data for column.priority
mutateColumnPriority(item) {

    // THIS CHECK IS FIRED in the mounted() function
    if (typeof item !== "undefined") {

        return _.chain(this.rows)
            .find({'id': item.id})
            .assign(item)
            .value();
    }

    return this.source.forEach(item => {
        item.priority = '<i title="' + this.priorityTitleName(item) + '" class="fa fa-circle ' + this.priorityClass(item) + '"></i>';
    });
},

    // Listen up for each event from the registered list of events
    for (let event of this.events) {
        socket.on(this.channel + event, ({data}) => {
            if (data.item.subtype === this.id) {
                this.mutateSource(data.item);
                return App.$store.commit('eventUpdateItem', data.item);
            }
        });
    }

0 个答案:

没有答案