Как в компоненте получить отсортированные данные из хранилища?

Question

[Dev-nik]

Как отсортировать по порядку входящие данные (числа), получаемые по из VUEX?

Сами данные:

filters =  {
    "age_ratings": [
      "16+",
      "18+",
      "0+",
      "12+"
    ],
    ...
}

Хранилище:

export const state = () => ({
  filters: []
})

export const mutations = {
  setFilters(state, filters) {
    state.filters = filters
  }
}

export const actions = {
  async filterFilms({ commit }) {
    const filters = await this.$axios.$get('apiUrl')
    commit('setFilters', filters)
  }
}

export const getters = {
  filters: st => st.filters
}

Компонент:

< v - select
  : items = "filters.age_ratings" //здесь вывожу нужные данные
  ></v - select >

    mounted() {
  this.$store.dispatch("films/filterFilms");
},
computed: {
  filters() {
    return this.$store.getters["films/filters"];
  }
}

Пробовал сделать так:

computed: {
  filters() {
    return this.$store.getters["films/filters"];
  },
  ageRatings() {
    let age = [];
    age.push(this.$store.getters["films/filters"].age_ratings);

    //нерабочий велосипед, пробовал отрезать плюс и отсортировать методом sort
    age.slice(0, -1).sort(function (a, b) {
      return a - b
    })

    return age
  }
}

Answer 1

[Alex]

Создайте ещё один геттер во Vuex и используйте его в компонентах:

export const getters = {
  filters: st => st.filters,
  ageRatings: (state, getters) => getters.filters.age_ratings.sort((a,b) => parseInt(a) - parseInt(b))
}

Comments

[Dev-nik]

Спасибо

[Dev-nik]

Ошибка появилась:
getters.filters.sort is not a function

[Alex]

Dev-nik, Как вы думаете, почему?