6

I've moved on a little in my Vue development to looking at using Vuex for state.

Previously, I had one master Vue component that had search, an array of items to loop over and the item iteration itself.

As I looked to split out the single component into several components (search, list of items and an item) - I saw that I couldn't change reactive properties from within a child component.

So, how should I be filtering my list of items. Do I handle that by way of state mutation or by computed properties in the child component?

Previously I was doing

export default {
    components: { Job },
    data() {
        return {
          list: [],
          categories: [],
          states: states,
          countries: countries,
          keyword: '',
          category: '',
          type: '',
          state: '',
          country: '',
          loading: true
        }
  },
  mounted() {
    axios.get('/api/cats.json')
        .then(response => 
            this.categories = response.data.data
        )
    axios.get('/api/jobs.json')
        .then(function (response) {
            this.list = response.data.data;
            this.loading = false;
        }.bind(this))
  },
  computed: {
    filteredByAll() {
      return getByCountry(getByState(getByType(getByCategory(getByKeyword(this.list, this.keyword), this.category), this.type), this.state), this.country)
    },
    filteredByKeyword() {
      return getByKeyword(this.list, this.keyword)
    },
    filteredByCategory() {
      return getByCategory(this.list, this.category)
    },
    filteredByType() {
      return getByType(this.list, this.type)
    },
    filteredByState() {
        return getByState(this.list, this.state)
    },
    filteredByCountry() {
        return getByCountry(this.list, this.country)
    }
  }
}

function getByKeyword(list, keyword) {
  const search = keyword.trim().toLowerCase()
  if (!search.length) return list
  return list.filter(item => item.name.toLowerCase().indexOf(search) > -1)
}

function getByCategory(list, category) {
  if (!category) return list
  return list.filter(item => item.category == category)
}

function getByType(list, type) {
  if (!type) return list
  return list.filter(item => item.type == type)
}

function getByState(list, state) {
    if(!state) return list
    return list.filter(item => item.stateCode == state)
}

function getByCountry(list, country) {
    if(!country) return list
    return list.filter(item => item.countryCode == country)
}

Should my filters apply from within the search component or as a mutation within state?

1 Answer 1

10

Should my filters apply from within the search component or as a mutation within state?

I am not sure as to why you want to mutate your state for filtering, what if some other filter had to be applied? I suggest using as many getters as you have filters in your components' computed.

Methods can be placed in a js file, so that you can re-use them elsewhere.

export function getByKeyword(list, keyword) {
  const search = keyword.trim().toLowerCase()
  if (!search.length) return list
  return list.filter(item => item.name.toLowerCase().indexOf(search) > -1)
}

export function getByCategory(list, category) {
  if (!category) return list
  return list.filter(item => item.category == category)
}

export function getByType(list, type) {
  if (!type) return list
  return list.filter(item => item.type == type)
}

export function getByState(list, state) {
    if(!state) return list
    return list.filter(item => item.stateCode == state)
}

export function getByCountry(list, country) {
    if(!country) return list
    return list.filter(item => item.countryCode == country)
}

You can have this in your store:

// someStoreModule.js

import {getByKeyword, getByCategory, getByType, getByState, getByCountry} from 'path/to/these/functions/file.js'

state: {
  list: [],
  categories: [],
  states: states,
  countries: countries,
  keyword: '',
  category: '',
  type: '',
  state: '',
  country: '',
  loading: true
},
getters: {
  filteredByAll() {
    return getByCountry(getByState(getByType(getByCategory(getByKeyword(state.list, state.keyword), state.category), state.type), state.state), state.country)
  },
  filteredByKeyword() {
    return getByKeyword(state.list, state.keyword)
  },
  filteredByCategory() {
    return getByCategory(state.list, state.category)
  },
  filteredByType() {
    return getByType(state.list, state.type)
  },
  filteredByState() {
      return getByState(state.list, state.state)
  },
  filteredByCountry() {
      return getByCountry(state.list, state.country)
  }
}

Lastly, your component can use it like so:

import { mapGetters } from 'vuex'

export default {
  ...
  computed: {
    ...mapGetters([  // you won't need to destructure if 
     'filteredByKeyword',   // you have no plans of adding other computed
     'filteredByCategory',  // properties. It would be safer anyway to keep it.
     'filteredByAll',
     'filteredByType',
     'filteredByState',
     'filteredByCountry'
    ])
  }
  ...
}
4
  • Thanks for this, so would those getters be mapped into each component, ie the filter component & the list component? Mar 8, 2017 at 9:20
  • 1
    @StevenGrant you would need to import and use mapGetters in each component that needs to have these getters. You can select though, the ones you want. If you want to avoid having to do this in many components then I recommend looking up mixins. Also note the minor error of maping the helper functions through mapGetters instead of getters, and that they should be in quotes. Mar 8, 2017 at 9:25
  • Thanks Amresh. I think I'm getting my head around this and how my filtering should work. So if my state contains a default country of 'all' to show all items and the user selects the dropdown to only show items in the US (as an example), surely I'd need to change state.country value to 'US'? Is that a mutation or something else? Mar 9, 2017 at 21:58
  • @StevenGrant True, any change that you make to your state would be through a mutation. If you want a certain kind of representation of your current state, you would need getters. So as long as your state.list is same, you can get that list post modification of state, country, keyword etc by getters. The modification of state, country etc on the other hand should be done by using a mutation. Mar 10, 2017 at 4:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.