개체 목록에 대한 vuex 저장소를 구성하고 ID를 기반으로 개체 목록에 개별적으로 매핑하는 방법

개체 목록에 대한 vuex 저장소를 구성하고 ID를 기반으로 개체 목록에 개별적으로 매핑하는 방법

제 사진 앱에는 촬영 세션 목록이 있으며, 각 세션에는 날짜, 시간, 여러 이미지 등의 메타데이터가 포함되어 있습니다.

Vuex 모듈을 작성했습니다.sessionONE 세션의 모든 정보를 저장합니다.

const state = {
  images: [],
  date: null,
  photographerId: null
}

그러나 실제로는 각각 독자적인 메타데이터와 이미지가 있는 세션을 여러 개 가질 수 있습니다.저는 많은 곳에서 정규화된 가게를 만들어야 한다고 읽었습니다.그래서 내가 상상하는 건

const state = {
  sessions: {
    session1: {
      images: [],
      date: null,
      photographerId: null 
    },
    session2: {
      images: [],
      date: null,
      photographerId: null 
    },
    ...
  }
}

각 세션에 액세스하기 위해 다음과 같은 getter를 사용할 수 있습니다.

const getters = {
  sessionById: (state) => (sessionId) => {
    return state.sessions[sessionId];
  }
}

하지만 여기 문제가 있다.특정 세션에 대한 데이터를 표시하는 현재 페이지에는 다음과 같은 코드가 있습니다.

computed: {
  ...mapState('session', ['images', 'date', 'photographerId'])
}

정규화된 매장으로 이동해도 어떻게 해야 하나요?대신 getter를 매핑하고 다음과 같이 각 세션의 속성을 개별적으로 선언할 수 있습니다.

computed: {
  ...mapGetters('session', ['sessionById']),
  images() {
    return this.sessionById(sessionId).images;
  },
  date() {
    return this.sessionById(sessionId).date;
  },
  photographerId() {
    return this.sessionById(sessionId).photographerId;
  }
}

하지만 그 느낌은 예전보다 더 안좋고mapState.

제가 Vuex를 잘못 사용하고 있다는 직감이 듭니다만, 누구 좀 가르쳐 주실 수 있겠습니까?

언급URL : https://stackoverflow.com/questions/56764359/how-to-structure-vuex-store-for-list-of-objects-and-mapping-to-them-individually