Мое фото приложение имеет список сеансов фотосессии, где каждый сеанс содержит метаданные, такие как дата, время и множество изображений.
Я написал модуль Vuex с именем session
, в котором хранится вся информация для ОДНОГО сеанса.
const state = {
images: [],
date: null,
photographerId: null
}
Однако реально у меня было бы несколько сессий, каждая со своими метаданными и изображениями. Во многих местах я читал, что я должен создать нормализованный магазин. Итак, что я представляю, чтобы быть как это:
const state = {
sessions: {
session1: {
images: [],
date: null,
photographerId: null
},
session2: {
images: [],
date: null,
photographerId: null
},
...
}
}
Чтобы получить доступ к каждому сеансу, у меня может быть такой геттер, как:
const getters = {
sessionById: (state) => (sessionId) => {
return state.sessions[sessionId];
}
}
Но тут возникает проблема. На моей текущей странице для отображения данных о конкретном сеансе у меня есть код вроде:
computed: {
...mapState('session', ['images', 'date', 'photographerId'])
}
Если бы я должен был перейти в нормализованный магазин, как я все еще могу достичь этого? Я знаю, что вместо этого могу сопоставить получатель и объявить атрибут каждого сеанса индивидуально, например:
computed: {
...mapGetters('session', ['sessionById']),
images() {
return this.sessionById(sessionId).images;
},
date() {
return this.sessionById(sessionId).date;
},
photographerId() {
return this.sessionById(sessionId).photographerId;
}
}
Но это выглядит довольно нахально и хуже, чем то, что я имел раньше с mapState
.
У меня ощущение, что я неправильно использую Vuex, может кто-нибудь просветить меня?