Vuex getter不会对状态更改做出反应

Question

我有一段代码，需要从Vuex存储中获取一些经过处理的值。所以我写了getter，它应该返回处理过的值。代码看起来像：

mediaSettings: (state) => {
const timestamps = [];
const events = [];
state.media.forEach( medium => {
if( !medium.settings || !medium.settings.dates ) return;
medium.settings.dates.forEach( dateRange => {
if( !dateRange.date_from || !dateRange.date_to ) return;
const from = new Date( dateRange.date_from );
const to = new Date( dateRange.date_to );
while ( from <= to ) {
if( timestamps.includes(from.getTime()) ) {
from.setDate( from.getDate() + 1 );
continue;
}
events.push({
date: new Date( from.getTime() ),  // Need Date clone via new Date().
mediumId: medium.id,
});
timestamps.push( from.getTime() );
from.setDate( from.getDate() + 1 );
};
});
});
return events;
}

这是改变数值的突变：

SET_MEDIA_SETTINGS(state, payload) {
state.media.forEach( medium => {
if( medium.id === payload.media_id ) {
medium.settings = { timeMode: payload.mode, dates: payload.dates, times: payload.times };
}
});
},

问题是，当state.media[].settings.dates[]值更改时，Vuex不会做出反应。更改应该发生在state.media[]级别。我该怎么修？这个问题的解决方法是什么？谢谢你的帮助。

Answer 1

解决方案是使用Vue set((方法更改突变中的值。代码在这里：

SET_MEDIA_SETTINGS(state, payload) {
state.media.forEach( (medium, index) => {
if( medium.id === payload.media_id ) {
medium.settings = { timeMode: payload.mode, dates: payload.dates, times: payload.times };
this._vm.$set(state.media, index, {...medium});
}
});
},