Как структурировать хранилище vuex для списка объектов и привязки к ним индивидуально на основе идентификатора - PullRequest
1 голос
/ 26 июня 2019

Мое фото приложение имеет список сеансов фотосессии, где каждый сеанс содержит метаданные, такие как дата, время и множество изображений.

Я написал модуль 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, может кто-нибудь просветить меня?

1 Ответ

0 голосов
/ 26 июня 2019

Почему бы не использовать:

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

Затем получите доступ к свойствам по мере необходимости от this.session?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...