Vuex动态注册模块排序问题及优化方案咨询

问题解答 #

我之前也碰到过Vuex动态模块注册后顺序不对的问题，其实核心原因不是Vuex的锅，是JavaScript对象的键排序规则在搞鬼，先给你逐个解答：

1. 能否让动态注册的模块按注册顺序排列？

不行。因为JavaScript对象对于数字类型（或可以被转为数字的字符串类型）的键，会自动按数值升序排列，不管你插入的顺序是什么。你用用户id（数字/数字字符串）作为模块的键，Vuex的state最终会把这些键整理成JS对象，自然就会被重新排序，和注册顺序无关。所以没法直接让模块按注册顺序在对象里排列。

2. 除注入order属性外，更优的解决方案有这几种：

• 方案一：维护一个独立的id顺序数组（最推荐）
  在users/list模块的state里额外加一个ids数组，每次注册用户模块时，把对应的id push到这个数组里。这样getter就不用依赖Object.keys，直接遍历ids数组去取对应的用户数据，完全保留API返回的顺序：

  // 注册模块时同步更新id顺序
  this.registerModule(['users', 'list', user.id], UserModule);
  this.commit('users/list/addUserId', user.id);
  
  // users/list模块的state和mutations
  state: {
    list: {}, // 存储各user模块的state
    ids: []   // 保存API返回的用户id顺序
  },
  mutations: {
    addUserId(state, id) {
      state.ids.push(id);
    }
  }
  
  // 最终的getter
  users: (state) => state.ids.map(id => state.list[id])
  

  这个方案逻辑清晰，不需要额外排序，性能也更好，而且不会污染用户模块的state。

• 方案二：用Map替代普通对象存储模块
  Vue 2.6+开始支持对Map的响应式处理，你可以把list改成Map类型，Map会严格保存键的插入顺序。注册模块时用state.list.set(user.id, 对应模块的state)，然后getter里直接用Array.from(state.list.values())就能得到按注册顺序排列的用户数组。不过要注意，在模板中使用Map时需要先转成数组，而且如果你的项目Vue版本较低可能不支持。

• 方案三：给id加非数字前缀
  如果不想额外维护数组，可以给用户id加一个固定的非数字前缀，比如'u_' + user.id，这样模块的键就变成了非数字形式的字符串（比如u_3、u_1）。JavaScript对非数字字符串的键会按插入顺序保存，这时Object.keys(state.list)的顺序就和注册顺序一致了，getter返回的数组也会和API顺序匹配。不过这个方案需要修改模块的键命名，可能影响其他依赖id的逻辑，需要评估改动成本。

内容的提问来源于stack exchange，提问作者Andrew Kim