小编aid*_*rza的帖子

在我的 Vue 应用程序中，我有 Vuex 存储模块，其中包含大量处于其状态的资源对象。为了轻松访问这些数组中的单个资源，我制作了 Vuex getter 函数，将资源或资源列表映射到各种键（例如“id”或“标签”）。这会导致性能缓慢和巨大的内存占用。如何在没有这么多重复数据的情况下获得相同的功能和反应性？

存储模块示例

export default {
  state: () => ({
    all: [
      { id: 1, tags: ['tag1', 'tag2'] },
      ...
    ],
    ...
  }),

  ...

  getters: {
    byId: (state) => {
      return state.all.reduce((map, item) => {
        map[item.id] = item
        return map
      }, {})
    },

    byTag: (state) => {
      return state.all.reduce((map, item, index) => {
        for (let i = 0; i < item.tags.length; i++) {
          map[item.tags[i]] = map[item.tags[i]] || []
          map[item.tags[i]].push(item)
        }
        return map
      }, {}) …