Vue中基于参数排序对象数组异常：仅部分元素排序求助

看起来你的排序功能出现异常的核心原因有两个：直接修改了Vuex store中的原始数组，以及字符串排序未处理大小写导致的逻辑问题，另外原代码的排序逻辑也可以更严谨。下面是具体的修复方案和解释：

问题分析 #

1. 原地排序污染原始数据：Array.sort()是原地排序方法，你直接对this.$store.getters["accounts/accountsList"]返回的数组进行排序，会修改Vuex store中的原始状态，这违反了Vuex状态不可变的原则，还会导致其他依赖该数据的组件出现异常，进而影响排序结果的正确性。
2. 字符串大小写未统一处理：你的测试数据里有"my description"和"My other description"这类大小写混合的字符串，直接比较ASCII值会导致排序结果不符合预期（大写字母的ASCII值小于小写）。
3. 排序条件判断不严谨：原代码仅判断this.sort.length != 0，但有效的排序条件应该是数组长度为2（同时包含排序类型和顺序），避免长度为1的无效情况干扰。

修复后的代码 #

1. 修正计算属性中的排序逻辑 #

computed: {
  accountsList() {
    // 先创建store数组的副本，彻底避免修改原始状态
    let list = [...this.$store.getters["accounts/accountsList"]];
    
    // 过滤逻辑保持不变，补充你的"my"分支逻辑
    if (this.$route.query.fave) {
      list = list.filter(x => x.fave === true);
    } else if (this.$route.query.my) {
      // 这里补充你的"my"过滤逻辑，比如 list = list.filter(...)
    }

    // 仅当有完整的排序条件时才执行排序
    if (this.sort.length === 2) {
      const [sortKey, sortOrder] = this.sort;
      list.sort((a, b) => {
        // 统一转小写处理字符串，消除大小写对排序的影响
        let valA = typeof a[sortKey] === 'string' ? a[sortKey].toLowerCase() : a[sortKey];
        let valB = typeof b[sortKey] === 'string' ? b[sortKey].toLowerCase() : b[sortKey];
        
        // 简化排序逻辑，根据顺序返回对应结果
        if (valA < valB) {
          return sortOrder === 'up' ? 1 : -1;
        }
        if (valA > valB) {
          return sortOrder === 'up' ? -1 : 1;
        }
        return 0;
      });
    }

    return list;
  },
}

2. 优化排序切换方法（可选） #

原方法逻辑没问题，可以用解构赋值让代码更清晰：

changeSort(sort, order) {
  const [currentSort, currentOrder] = this.sort;
  if (currentSort === sort && currentOrder === order) {
    this.sort = [];
  } else {
    this.sort = [sort, order];
  }
}

测试验证 #

用你提供的测试数据：

[{
  category: "test2",
  description: "adadad",
  name: "adadadadad"
}, {
  category: "test",
  description: "my description",
  name: "NewAccount"
}, {
  category: "test",
  description: "My other description",
  name: "another new account"
}]

• 按category+up排序：test2会排在最前，两个test的元素会按原始顺序排列（因为category值转小写后相同，返回0）
• 按description+down排序：会按小写后的字符串升序排列，结果为"adadad" → "my description" → "My other description"

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