Vue.js – mapGetters with Params

Using mapGetters with parameters isn’t well defined in the docs, and is a pattern I go to use pretty regularly.

I never find a good search result, so here goes:

1.Define the getter in the store. Take note that the naming convention will be [store namespace]/[getter name] later. Since this is in my users store, it’ll be users/usersForMember. Note the function accepts a parameter.

  usersForMember: (state) => (member) => {
    return state.users.data.filter(u => u.member_id === member.id)
  }

2.Connect the component side getter to the getter in the vuex store. I kept trying to mangle mapGetters to accept my params. This is the wrong approach – it just need to be directly wired up. Note the [namespace]/[getter name] convention from above, so vue can find the getter.

  
import { mapState, mapGetters } from 'vuex'

/* snip */

computed: {
    ...mapState({
      // other stuff
    }),
    ...mapGetters({
  // this is it.
      usersForMember: 'users/usersForMember'
    }),

Now, the piece I always miss! Write a method in the component to call the getter with the parameter.

  computed: {
    /* snip, from above */
// this is it:
    users () {
      return this.usersForMember({ id: this.user.member_id })
    }
  }

Over in the template, we can now output {{users}} and see the results of our handywork.