在 vuex getter 中鏈接多個過濾器

Question

我有一個建築清單。 我可以通過將建築數據存儲到建築列表 state 中來將建築數據提取到組件中。

有多個下拉列表作為不同的過濾器（例如：狀態、state、國家等）。 我想鏈接所有過濾器並獲取過濾后的數據。

這是有關過濾器結構的偽造數據

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']
    }
  }

現在，我通過服務調用它以將初始過濾器加載到組件中。 現在，我必須將其配置到商店中。

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

我知道這家商店不正確，但如何根據多個不同的過濾器過濾建築列表並根據條件鏈接過濾器。

Answer 1

getter可以根據給定的過濾器一一調用輸入上的Array.prototype.filter() 。 以下示例假設filterByStatus 、 filterByCountry和filterByState都包含搜索詞。

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