[Udemy Vue 완벽가이드 Section16] 251. 활성 코치에 대한 요청 필터링하기

이제 모든 요청을 가져오는 것이 아니라, coachId가 우리의 id인 request만을 필터링하고자 한다.

 

getter안에서는 하나 이상의 인수를 받을 수 있다는 사실을 활용해보자.

state외에도 다른 getter에 액세스할 수있고, rootState, rootGetters도 가능하다.

여기서 필요한 건 rootGetters이다. userId는 루트 저장소의 일부이므로.

그리고 거기엔 이미 userId 게터가 있다.

// index.js
import { createStore } from 'vuex';
import coachesModule from './module/coaches/index.js';
import requestsModule from './module/requests/index.js';

const store = createStore({
  modules: {
    coaches: coachesModule,
    requests: requestsModule,
  },
  state() {
    return {
      userId: 'c3',
    };
  },
  getters: {
    userId(state) {
      return state.userId;
    },
  },
});

export default store;

// requests > getters.js
export default {
  requests(state, _, _2, rootGetters) {
    const coachId = rootGetters.userId;
    return state.requests.filter(req => req.coachId === coachId); //여기에 해당하는 request만을 반환
  },
  hasRequests(_, getters) { //필터링된 requests만을 확인.
    return getters.requests && getters.requests.length > 0;
  },
};

 

 

이렇게 message를 보내도, request가 보이지 않는다.

▼

 

 

이제 coach로 등록하고, 자신에게 메시지를 보내면(그다지 말이 되지 않지만) message가 보인다.

 

 

따라서 필터링이 제대로 작동하고 있음을 볼 수 있다.

이렇게 해서 (더미버전이지만) 앱 전체가 거의 완성되었다.

 

바로 코치와 요청을 저장할 실제 백엔드가 빠졌다.

실제 백엔드에서 데이터도 가져오게 된다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.