Pass arguments to a Vuex getter

Passing arguments to a vuex getter is very useful. It makes them more powerful. However, the syntax to do it is quite tricky. That's why I wrote this post.

Even if the code below is paste from a Quasar project, it could be applied in any Vue project.

In this Quasar project, I use Vuex in module mode.

// src/store/myModule/getters.js
export const myFunctionWithArgument = (state) => (myArgument) => {
    // it's an example
    return state.all[myArgument]
}

Then in your single file component, you can call it like this:

// src/components/MyComponent.vue
export default {
    computed: {
        myValue () {
            return this.$store.getters['myModule/myFunctionWithArgument'](2)
            // the value 2 is the argument I pass to my getter function
        }        
    }
}

And voilà. Simple trick, but tricky syntax.

If you don't use Vuex in module mode, the getter could be written like this:

// src/store/index.js
export default function () {
  const Store = new Vuex.Store({
      // etc...
    getters: {
      myFunctionWithArgument: (state) => (myArgument) => {
        // it's an example
        return state.all[myArgument]
      }
    }
  })
}