Как отсортировать данные в состоянии Vuex с мутацией - PullRequest
Новая
       31

Как отсортировать данные в состоянии Vuex с мутацией

1 голос
/ 08 мая 2019

У меня есть массив объектов, который отображается в таблице на моей html-странице в одном из моих компонентов Vue.Массив объектов - это данные в состоянии хранилища 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
    }
});

Я пытаюсь отсортировать массив объектов в мутации sortJobs, но это не сработает.Я вызываю мутацию в одном из моих компонентов. 

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

Это не изменит порядок массива объектов, ни в моей таблице.Я проверил, могу ли я что-нибудь сделать с массивом объектов, и когда я заменяю this.state.jobs.sort(...) на this.state.jobs.shift();, первый элемент объекта в массиве исчезает из моей таблицы.Но когда дело доходит до сортировки, я не могу заставить это сортировать вообще.Что я делаю не так?

1 Ответ

1 голос
/ 08 мая 2019

Массивы сложны в 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;
    }
  },

Также:

  • переместить создание экземпляра переменной сравнения в обратный вызов sort, поэтому он будет новым каждый раз, когда вы сортируете два элемента списка.
  • вместо использования a.sortKey, который будет буквально искать свойство sortKey, используйте a[sortKey], что позволит вам получить доступ к атрибуту переменной.

Рабочий пример, без vuex: https://jsfiddle.net/ebbishop/7eku4vf0/

...