Why curry Vuex getter parameter?


#1

According to the documentation for Vuex if one wants to write a getter that takes a parameter, the function has to be defined like:

page: (state) => (id) => {
    return state.pages.find(page => page.id === id)
  }

instead of like:

page(state, id) {
    return state.pages.find(page => page.id === id)
  }

Is there a reason why getters have to be curried? Because when I tried the latter syntax (as I find it easier to read) I kept getting a 'page' is not a function error when calling it.


#2

Because getters are (essentially) just computed properties. They do not behave like functions, they behave like properties. You cant put parenthesis on a property, right? But, you can have the return value of a getter function be another function, so the “property” holds a value being a function, much like assigning a function to a variable. But by doing this, Vuex can’t cache the result and will cause that getter to be re-evaluated every time. I generally avoid returning functions in getters/computed properties as I like to treat them as just properties, or essentially, just derived values.


#3

So if I understand correctly getters (and also computed properties?) don’t support parameters by default, so if I want to have a getter that takes a parameter I have to return a function which takes a parameter?


#4

That’s right.