无法在 vuex 操作 Vue.js 中对对象数组进行排序答案

【问题标题】：Not able to sort object array in vuex action Vue.js无法在 vuex 操作 Vue.js 中对对象数组进行排序
【发布时间】：2020-11-30 22:16:32
【问题描述】：

我正在尝试对数组进行排序，但不知何故，排序并没有运行，仅通过控制台日志证明。我无法理解为什么它没有运行。如果我在简单的 javascript 中运行相同的代码运行良好。如果有人知道发生了什么，那将是一个很大的帮助。

fetchContacts({
    commit
}, userId) {
    let contactsArr = [];
    console.log('contact action triggered');
    db.collection("users").doc(userId).collection("contacts").onSnapshot((snapshot) => {
        snapshot.forEach((el) => {
            contactsArr.push({
                name: el.data().name,
                phone: el.data().phone,
                email: el.data().email,
                id: el.id
            });
        })
    })
    console.log('contact array: '+ contactsArr);
    console.log(contactsArr);
    contactsArr.sort((a, b) => {
        console.log('sorting in ');
        const n1 = a.name.toLowerCase();
        console.log(n1);
        const n2 = b.name.toLowerCase();
        console.log(n2);
        if (n1 > n2) {
            return 1;
        } else if (n2 > n1) {
            return -1;
        } else {
            return 0;
        }
    });
    commit('setContacts', contactsArr);
},

【问题讨论】：

数组为空，所以排序函数根本不会执行。
Hi Moon，数组不为空。请检查我刚刚上传的控制台图像。
您的数组在排序时实际上是空的。当您在输出中展开数组时，Chrome 会懒惰地评估数组，到那时它已被先前的异步代码填充。
这是不知道的，这个信息在将来调试时也会有所帮助。谢谢

标签： javascript firebase sorting vue.js vuex

【解决方案1】：

您应该在 onSnapshot 回调中取消排序，因为您当前的代码是以异步方式执行的：

 let contactsArr = [];
    console.log('contact action triggered');
    db.collection("users").doc(userId).collection("contacts").onSnapshot((snapshot) => {
        snapshot.forEach((el) => {
            contactsArr.push({
                name: el.data().name,
                phone: el.data().phone,
                email: el.data().email,
                id: el.id
            });
        })

      console.log('contact array: '+ contactsArr);
    console.log(contactsArr);
    contactsArr.sort((a, b) => {
        console.log('sorting in ');
        const n1 = a.name.toLowerCase();
        console.log(n1);
        const n2 = b.name.toLowerCase();
        console.log(n2);
        if (n1 > n2) {
            return 1;
        } else if (n2 > n1) {
            return -1;
        } else {
            return 0;
        }
    });
    commit('setContacts', contactsArr);
    })

【讨论】：

我明白了，但我的问题是，如果我能够在排序之前打印数组，而不是我无法对它进行排序。感谢您的回复。