getters return a function in mutation vuex in vue js

I am working on a project that has already started and my problem is the following:

I have a mutation, which will render a menu, depending on whether the user has permission to access or not, this is calculated with a getter.

let menuList = [];
appRouters.forEach(item => {
  // eslint-disable-next-line no-console
  if (item.permission !== undefined) {
    let hasPermissionMenuArr = [];
    hasPermissionMenuArr = item.children.filter(child => {
      if (child.permission !== undefined) {
        //if (child.permission.includes('operator')) {
        console.log(hasPermission(child.permission))
          if (hasPermission(child.permission))  {
          return child;
        }
      } else {
        return child;
      }
    });

The code would “work” fine, but when it goes to access the getters to check if the user has permission to that menu, the getters that one returns the function it has to receive parameters, and not the value.

export const hasPermission = state => permission => {
return isGranted(state, permission);
};

here the other function of the getter

function isGranted(state, permissionName) {
  return (
    state.user !== undefined &&
    state.user.roles !== undefined &&
    state.user.roles.some(p => {
      return p.toLowerCase() === permissionName.toLowerCase();
    })
  );
}

I know that the getter is calling a third function, but even, to the hasPermission getter I have only put a return of a console.log of the permission that is passed to it, and even then it returns the function in text.

I know there is something that I do not understand

This is expected the way you’ve coded your function. “hasPermission” is a function that returns a function. I’m guessing you’re expecting the function to work like the method style access in the docs. But based on the code you provided, I can only assume you are accessing this function directly rather than through the store (which will do a few things under the hood to make this style of access possible).

This style is called function currying (or in this case partial application). Here’s a good read on it: Curry and Function Composition. Note: This is part of the “Composing… | by Eric Elliott | JavaScript Scene | Medium

You’re right! I am accessing directly and not through the store. Thank you very much for your help!