Vue.js vue组件中来自vuex的筛选数据不反应

我有一个带有两个数据点的vuex存储：

eventGroups—保存与该组关联的所有事件的元信息，并用于将一组

元素呈现在一起

事件-保存事件数据，具有eventGroupId，并具有在

我的主应用程序正在呈现一组事件组元素，可能看起来像：

。正如您所看到的，它正在传递该事件组的id

eventGroup组件有一个

computed

属性

computed: {
  events: function() {
    return this.$store.state.events.filter( event => event.eventGroupId === this.id );
  });
}

我的问题是computed

events

属性实际上是一个数组，因为我使用的是

filter

，所以它是非反应性的。当我在代码库中的任何位置更新事件代码时，它不会注册为对computed

events

属性的更改。我被困在一个奇怪的环境中，从“vuex”导入{mapGetters}可能不是那么容易并使用getter查找匹配的事件。有没有其他方法可以让这个反应

以下是我的vuex商店的相关部分：

return new Vuex.Store({

  getters: {

    getNextId: function( state ) {
      return function( resource ) {
        return this[ resource ].length > 0
          ? Math.max.apply( Math, Object.keys( this[ resource ] ) ) + 1
          : 0;
      }.bind( state );
    }
  },

  actions: {

    addEvent: function( store, event ) {
      event.startDate = moment( new Date( event.startDate ) );
      event.endDate = moment( new Date( event.endDate ) );
      event.startTime = event.displayDate[ 1 ];

      store.commit( 'setItem', { resource: 'events', id: store.getters.getNextId( 'events' ), item: event } );
    },

    updateEvent: function( store, event ) {
      store.commit( 'updateItem', { resource: 'events', id: event.id, item: event.data } );
    }
  },

  mutations: {

    setItem: function( state, payload ) {
      payload.item[ '.id' ] = payload.id;
      Vue.set( state[ payload.resource ], payload.id, payload.item );
    },

    updateItem: function( state, payload ) {
      Vue.set( state[ payload.resource ], payload.id, Object.assign( {}, state[ payload.resource ][ payload.id ], payload.item ) );
    }
}

---

对于

当我在代码库中的任何位置更新事件代码时，

，您是否可以共享代码以及如何更新事件数据（如事件id或其他）？我会通过vuex操作来完成此操作，但问题是，我知道如果您不遵循“警告”部分中的建议，对象和数组可能会变得无反应。我将用@Sphinx的更多细节来编辑这个问题。@Sphinx，现在我已经编辑了这个问题，我可以通过调用

updateEvent

操作来更改事件，类似于

this.$store.dispatch（'updateEvent'，{id:this.id，data:{showDetails:this.showDetails}）

你确定你的

event.id

是

events

数组的索引吗？@Sphinx，我想你有点漏掉了。问题不在于我如何保存数据，它在vuex存储中更新，并保持被动。该问题存在于一个子组件中，该子组件被传递一个

eventGroupId

，然后使用一个computed属性使用

.filter（）

函数获取每个组中的事件列表

.filter（）

返回一个数组，而不是反应数组，因此即使事件数据更新，使用

.filter（）

函数派生的每个组中的事件列表也是静态的，不会响应。