Pass parameters to getters with namespace set to true

In Vuex Store’s module when namespace was set to false I was passing parameters to getters by using this code:

abc.vue
computed: {
transaction: function () {
return this.$store.getters.getTransaction(1)
}
}

getters.js
getTransaction: state => {
return referenceNo => {
return _.find(state.transactions, transaction => {
return transaction.referenceNo === referenceNo
})
}
}

but now when I am setting namespace to true I am calling getTransaction getter by this code:

computed: {
transaction: function () {
return this.$store.getters[‘transaction/getTransaction’]
}
}

how can I pass parameters in this scnerio?

Thanks

Please format your code properly:

I have exactly the same issue
I am using Vuex with modules sand namespaces.
i built two Getters on a module called ‘restaurants’:

export const getRestaurants = (state) => state.restaurants
export const getRestoDetailById = (state) => (id) => {
  state.restaurants.find(restaurant => restaurant._id === id)
}

in vue, I have a computed property called restaurant which is supposed to use the ‘getRestoDetailById’ getter to retrieve a specific restaurant based on Id.

i tried many methods to make it work without success including :

return this.$store.getters['restaurants/getRestoDetailById'](this.restoId)

and

return this.$store.getters[`restaurants/getRestoDetailById(${this.restoId})`]

it never worked so i finally decided to use the other Getter (the one that bring all list to run the function in the computed property as above but there should be a better way.

computed: {
    restaurant() {
        return this.$store.getters['restaurants/getRestaurants'].find(restaurant => restaurant._id === this.restoId)    
    }
  },

any suggestion ?

Maybe if you explain what you mean by:

console.log(this.$store.getters['restaurants/getRestoDetailById'](this.restoId))

it returns 'undefined’
I replaced the variable by the real value of an id

console.log(this.$store.getters['restaurants/getRestoDetailById']('5aadbbd70d7a64318ef773e1'))

and i also get undefined in the console

Thanks, that made it easier to spot your error.

You did not return in the function. You likely assumed that you dont have to do that since its a one liner in an arrow function, but the implicit return doesn’t happen once you use {}

1 Like

that works,
thanks a lot.
for others to make sure it is explicit, here is the way to build the getter :

export const getRestoDetailById = (state) => (id) => {
  return state.restaurants.find(restaurant => restaurant._id === id)
}

that you can call with :

  computed: {
    restaurant() {
      return this.$store.getters['restaurants/getRestoDetailById'](this.restoId)
    }
  }, 
2 Likes

My suggestion is that you use mapGetters to make your code clear:

import { createNamespacedHelpers } from 'vuex';
const { mapGetters } = createNamespacedHelpers('restaurants');    

// then 
computed: {
    ...mapGetters(['getRestoDetailById'])
}
// then you can use it like 

const aRestaurant = this.getRestoDetailById(this.id);
1 Like

thanks a lot.