如何使用突变对Vuex状态中的数据进行排序

Question

我有一组对象，它们显示在我的 Vue 组件之一的 html 页面上的表格中。对象数组是处于 Vuex 存储状态的数据。

export const store = new Vuex.Store({
    state: {
        jobs: [{...},{...},{...},{...},{...},{...}]
    },
    mutations: {
        sortJobs(state, sortKey) {
            console.log('running mutation');
            let compare = 0;
            this.state.jobs.sort((a, b) => {
                if (a.sortKey > b.sortKey) {
                    compare = 1;
                } else if (b.sortKey > a.sortKey) {
                    compare = -1;
                }
                return compare;
            });
        }
    },
    getters: {
        jobs: state => state.jobs
    }
});

我正在尝试对 mutation 中的对象数组进行排序sortJobs，但它不起作用。我在我的一个组件中调用了突变。

methods: {
    sortBy: function(sortKey) {
        this.$store.commit('sortJobs', sortKey);
    }
}

这不会改变对象数组的顺序，也不会改变我的表中的顺序。我已经测试过我是否可以对对象数组做任何事情，当我用 替换this.state.jobs.sort(...)时this.state.jobs.shift();，数组中的第一个对象元素从我的表中消失。但是当涉及到排序时，我根本无法进行排序。我究竟做错了什么？

Answer 1

数组在 Vue 中很棘手。看看这些常见的问题。

不要在原地改变数组，而是尝试制作副本，对副本state.jobs进行排序并设置为该排序数组。

像这样的东西：

  mutations: {
    sortJobs(state, sortKey) {
        console.log('running mutation');
        const jobs = this.state.jobs;
        jobs.sort((a, b) => {
            let compare = 0;
            if (a[sortKey] > b[sortKey]) {
                compare = 1;
            } else if (b[sortKey] > a[sortKey]) {
                compare = -1;
            }
            return compare;
        });
        state.jobs = jobs;
    }
  },

还：

• 将比较变量的实例化移动到排序回调中，因此每次对两个列表项进行排序时它都会是新的。
• 而不是 using a.sortKey，它会从字面上查找sortKey属性 use a[sortKey]，它可以让您访问变量属性。

工作示例，没有 vuex：https ://jsfiddle.net/ebbishop/7eku4vf0/