时间戳

首页 > 解决方案 > 如何为对象列表构建 vuex 存储并根据 ID 单独映射到它们

vue.js - 如何为对象列表构建 vuex 存储并根据 ID 单独映射到它们

问题描述

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

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

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;
  }
}

但这感觉很hacky，比我以前用的更糟糕mapState。

我有一种直觉，我错误地使用了 Vuex，有人可以赐教吗？

标签： vue.jsvuex

解决方案

推荐阅读