vue 구성 요소에서 vuex에서 필터링된 데이터가 반응하지 않음

vue 구성 요소에서 vuex에서 필터링된 데이터가 반응하지 않음

데이터 포인트가 2개인 vuex 스토어가 있습니다.

eventGroups - 해당 그룹과 관련된 모든 이벤트에 대한 메타 정보를 보유하며 여러 개의 이벤트를 렌더링하는 데 사용됩니다.<li>구성 요소를 결합합니다.

events - 이벤트 데이터 보유, event GroupId 및 이벤트 표시에 필요한 모든 데이터 보유<li>

메인 앱은 많은 이벤트 그룹 요소를 렌더링하고 있으며 다음과 같이 보일 수 있습니다.<event-group :id="event.eventGroupId">보시는 바와 같이 해당 이벤트 그룹의 ID로 전달됩니다.

event Group 컴포넌트는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 ) );
    }
}

언급URL : https://stackoverflow.com/questions/51937536/filtered-data-from-vuex-not-reactive-in-vue-component