How to filter VUEX API data?

Question

RESTful API

Good afternoon!

Can you please tell me how to filter in order the incoming json data (numbers) received via the API from VUEX?

The data itself filters =

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

index.js file

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
}

VUE Component File

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

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

Tried to do like this:

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

Create another getter in Vuex and use it in your components:

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