How to create a Vuex getter that takes an argument?

Sometimes, we want to create a Vuex getter that takes an argument.

In this article, we’ll look at how to create a Vuex getter that takes an argument.

How to create a Vuex getter that takes an argument?

To create a Vuex getter that takes an argument, we can return a function in our getter function.

For instance, we write

const store = new Vuex.Store({
  getters: {
    someMethod: (state) => (id) => {
      return state.things.find((thing) => thing.id === id);
    },
  },
});

to return a function in the someMethod getter by setting someMethod to a function that returns a function that returns an object.

Then we can call someMethod with the id parameter in our components with

store.getters.someMethod(2)

Conclusion

To create a Vuex getter that takes an argument, we can return a function in our getter function.