How to sort data in Vuex state with mutation

Question

I have an array of objects that displays in a table on my html page in one of my Vue components. The array of objects is data in the state of a Vuex store.

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
    }
});

I am trying to sort the array of objects in the mutation sortJobs, but it will not work. I am calling the mutation in one of my components.

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

This will not change the order of the array of objects, nor in my table. I've tested to see if I can do anything to the array of objects, and when I replace this.state.jobs.sort(...) with this.state.jobs.shift();, the first object element in the array disappears off of my table. But when it comes to sorting, I can't get this to sort at all. What am I doing wrong?

Answer 1

Arrays are tricky in Vue. Take a look at these common gotchas.

Instead of mutating the array in place, try making a copy, sorting the copy and setting state.jobs to that sorted array.

Something like this:

  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;
    }
  },

Also:

• move the instantiation of the compare variable into the sort callback, so it'll be new each time you sort two list items.
• instead of using a.sortKey, which will literally look for the sortKey property, use a[sortKey], which will let you access a variable attribute.

Working example, without vuex: https://jsfiddle.net/ebbishop/7eku4vf0/