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]
}
}
})
}