我正在使用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);
}
});
}