Question

我的照片应用有一个拍摄会话列表，其中每个会话都包含日期，时间和许多图像等元数据。

我编写了一个名为session的Vuex模块，用于存储一个会话的所有信息。

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'])
}

如果我要搬到正规商店，我怎么还能做到这一点？我知道我可以改为映射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错误，有人可以启发我吗？

Answer 1

为什么不使用：

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

然后根据需要从this.session访问属性？

如何为对象列表构造vuex存储并根据ID分别映射到它们

1 个答案: