在 vuex getter 中链接多个过滤器

Question

I have a building list. I am able to fetch the building data into component by storing it into building list state.

There are multiple dropdownlist as a different filters(eg: status, state, country etc). I want to chain up all the filters and getting filtered data.

Here is the faker data regarding filter structure

const buildingFilters = {
fields: [
    {
        field: 'id',
        title: 'Id',
    },
    {
        field: 'name',
        title: 'Name',
    },
    {
        field: 'type',
        title: 'Type'
    },
    {
        field: 'status',
        title: 'Status'
    },
    {
        field: 'city',
        title: 'City'
    },
    {
        field: 'state',
        title: 'State'
    },
    {
        field: 'country',
        title: 'Country'
    },
    {
        field: 'reporting Zone',
        type: 'Reporting Zone'
    }
],
filtersType: {
    country: {
        field: 'country',
        listofValues: ['USA', 'CANADA']
    },
    state: {
        field: 'state',
        listofValues: ['Maryland', 'New Jersey']
    },
    city: {
        field: 'city',
        listofValues: ['Bethesda', 'Monmoth Junction']
    },
    reporting_zone: {
        field: 'reporting_zone',
        listofValues: ['RZ1', 'RZ2']
    },
    status: {
        field: 'status',
        listofValues: ['Draft', 'Inprogress']
    },
    type: {
        field: 'type',
        listofValues: ['Type 1', 'Type 2']
    }
  }

Now, i am calling this by service to load the initial filters into component. Now,i have to configure it into store.

    const defaultState = {
    bldgList: emptyArray,
    bldgFilter: emptyArray,
    filteredData: [],
    filterTypes: {
        filterByStatus: '',
        filterByCountry: '',
        filterByState: ''
    }
};

const getters = {
    filteredData: state => {
       return state.filteredData = state.bldgList.slice()
       if(state.filterTypes.filterByStatus !== '') {
           // not understand how will i do that
       }

    }
};

const mutations = {
   FILTER_FIELD_CHANGE(state,payload) {
      // here we need to update Filters change
   }

},

const actions = {
  async filteredData({commit}, filterTypes) {
      commit('FILTER_FIELD_CHANGE', filterTypes)
  }
}

This store is not correct i know but how to filter building list based on multiple different filters and chaining filters based on condition.

Answer 1

The getter could call Array.prototype.filter() on the input based on the given filters, one by one. The following example assumes filterByStatus , filterByCountry and filterByState each contain the search term.

const getters = {
    filteredData: state => {
       let bldgs = state.bldgList
       if (state.filterTypes.filterByStatus) {
           bldgs = bldgs.filter(b => b.status.includes(state.filterTypes.filterByStatus))
       }
       if (state.filterTypes.filterByCountry) {
           bldgs = bldgs.filter(b => b.country === state.filterTypes.filterByCountry)
       }
       if (state.filterTypes.filterByState) {
           bldgs = bldgs.filter(b => b.state === state.filterTypes.filterByState)
       }
       return bldgs
    }
};