Question

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

eventGroups-保存有关与该组关联的所有事件的元信息，并用于将一堆<li>元素一起呈现。

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

中显示事件所需的所有数据

我的主应用正在渲染一堆事件组元素，看起来可能像：<event-group :id="event.eventGroupId">。如您所见，它正在传递该事件组的ID。

eventGroup组件具有computed属性

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

我的问题是，由于我正在使用events，因此计算出的filter属性实际上是一个数组，因此它是非反应性的。当我在代码库中的任何地方更新事件代码时，都没有将其注册为对计算的events属性的更改。我被困在一个奇怪的环境中，在该环境中import { mapGetters } from 'vuex';可能并不那么容易，并且要使用吸气剂来找到匹配的事件。有没有其他方法可以使此反应性？

这是我的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 ) );
    }
}

从vuex过滤的数据在vue组件中不起作用

0 个答案: