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

我正在尝试对突变sortJobs中的对象数组进行排序，但是它不起作用。我称这种突变为我的成分之一。

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

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

Answer 1

在Vue中，数组很棘手。看看这些common gotchas。

请尝试制作一个副本，对副本进行排序，然后将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;
    }
  },

也：

将compare变量的实例化移动到sort回调中，因此每次对两个列表项进行排序时它都是新的。
使用a.sortKey而不是使用sortKey（实际上会寻找a[sortKey]属性），而使用<div class="container"> <div class="card-header">Configurarcion de plantilla imagen, audio, video</div> <ul class="nav nav-tabs"> <li class="tablinks active"><a data-toggle="tab" href="#insEntorno">Instrucciones de entorno</a></li> <li class="tablinks"><a data-toggle="tab" href="#lineaB">Linea base</a></li> <li class="tablinks"><a data-toggle="tab" href="#descansos">Descansos</a></li> <li class="tablinks"><a data-toggle="tab" href="#fases">Fases</a></li> </ul> <div class="tab-content ">  </div>  </div> <input type="button" onclick="goto('fases')" value="Configuracion de instrucciones de entorno "/>，这将允许您访问变量属性。

不带vuex的工作示例： https://jsfiddle.net/ebbishop/7eku4vf0/

Answer 2

选择@Ebbishops 回答，您可以通过检查您当前的排序方向来进一步修改它，如下所示：

// html
<th scope="col" @click="sort('title')">Title</th>
<th scope="col" @click="sort('content')">Content</th>

// script
    methods: {
        ...mapActions(['articles/SORT_ARTICLES']),
        sort(s) {
          this.$store.dispatch('articles/' + 'SORT_ARTICLES', s)
        }
      },


// state
export const state = () => ({
  articles: {},
  currentSort: 'title',
  currentSortDir: 'asc',
});


//mutations
  SET_SORT_ARTICLES: (state, sortKey) => {
    if(sortKey === state.currentSort) {
      state.currentSortDir = state.currentSortDir === 'asc' ? 'desc' : 'asc';
    }
    state.currentSort = sortKey;

      state.articles.sort((a,b) => {
        let modifier = 1;
        if(state.currentSortDir === 'desc') modifier = -1;
        if(a[state.currentSort] < b[state.currentSort]) return -1 * modifier;
        if(a[state.currentSort] > b[state.currentSort]) return modifier;
        return state.articles;
      });
  },

这使您可以双向排序

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

2 个答案: