Vuex: How to pass parameters to the function in getters

[huangyanxiong01]

store

export default  new Vuex.Store({
   getters:{
    search(state,keyword){
      //return state.items; //first question
     //second question
      return state.items.filter(item =>{
        return item.name === keyword
      });
    }
  }
})

component

  export default {
    name: 'items',
    computed: {
      search () {
        return this.$store.getters.search
      }
    }
  }

1.It don't work,why? According to this document
2.How to pass parameters to the function in getters?

[znck]

You may want to do this.

export default  new Vuex.Store({
   getters:{
    search(state) {
      return keyword => state.items.filter(item =>{
        return item.name === keyword
      });
    }
  }
})

export default {
    name: 'items',
    computed: {
      search () {
        return this.$store.getters.search('foo')
      }
    }
  }

---

If you want to ask such questions, please use our forum or gitter. The issue list is reserved exclusively for bug reports and feature requests.

Thanks.

[huangyanxiong01]

thank you very mach!

[askhat]

One more arrow, if you will

export default {
  getters: {
    getByIndex: state => index => state.someArray[index]
  }
}

[hjJunior]

anybody knows if is possible to load getters in component using mapGetters?

I mean, instead of this
return this.$store.getters.search('foo')

do something using the mapGetters
...mapGetters(['something', search(params)']),

[johanbaaij]

@hjJunior yeah, make sure to use the notation @askhat used, and you can just do
...mapGetters(['something', search']),
and then this.search(params)

[hjJunior]

That's sound good :) Thx @johanbaaij

[Harti]

Glad you all are flinging around the lambdas like they're trendy, but does anybody have an actual explanation as to how the parameters are forwarded to the arrow functions?

[askhat]

@Harti it is quite clear when you're seeing syntax

// some store instance
getters: {
  regularGetter: state => state.someProp,
  curryGetter: state => param => state.someArr.find(el => el === param)
}

// some component instance
someInstaceMethod () {
  // it is precomputed so it hold a reference to a value in the store
  // until some of its subciptions has been invalidated
  this.$store.getters.regularGetter

  // it is called curry 'cause it is currying its params to its inner function
  this.$store.getters.curryGetter // this will just return a function so it is uselless yet
  // in order to be able to call an inner function you may use syntax below
  this.$store.getters['curryGetter'](someParam)
  // as you may observe the line above will take a function from getter
  // then call it with given param, and since it holds a reference to the store in its closure
  // it will be able to perfom desired computations
}

Hope it's explanins why everybody talk about lambdas.

[JoanneFsadni]

Hi i am using the mapGetters but now i need to use the method inside an api call... how can i call it please? this is what im doing:

...mapGetters('currency', ['getCurrencySymbolByCode', 'getCurrencyCodeById']),

UserAccounts.all().then((accounts) => { this.accs = accounts.map(function (account) { this.currencyObject = this.getCurrencyCodeById() console.log(this.currencyObject) return account }) // Last step is to move this to the vuex store }).catch((error) => { console.log('error:', error) })

[Picturk]

...Use an Action to handle the api call. Update the store with a mutation. Use a getter to ‘shape’ the data into what’s needed by your app.

[felipe-muner]

Amazing dudes, Nice job !

[xgqfrms]

🎩 magic