Fulfill the name property of store actions

[YehorPytomets]

What problem is this solving

Hello!

We propose to fulfill the name property of store actions to easily refer to the action from the store object when filtering actions by name in the $onAction callback.
This could prevent us from using raw string values as the action name may change in the future, and this place will become the source of hidden errors.

userStore.$onAction(({name}) => {
    if (name == 'setUser') {
        // ...   
    }
}

Currently, the actions name is unset:

Proposed solution

The solution assumes the action can easily be filtered by name using the store object of the $onActioncallback:

userStore.$onAction(({name, store}) => {
    if (name == store.setUser.name) {
        // ...   
    }
}

Describe alternatives you've considered

As an alternative a similar object to options that is passed to plugins may be used:

// from plugins docs:
export function myPiniaPlugin(context) {
  context.pinia
  context.app
  context.store
  context.options // the options object defining the store passed to `defineStore()`. Contains actions
  // ...
}

// if the same or similar `options` object was passed:
userStore.$onAction(({name, options}) => {
    if (name == options.actions.setUser.name) {
        // ...   
    }
}

As a temporary workaround, in the same file with the store definition, we declare and export an object that contains action names that are used specifically for this case. As the store may grow and change, we may forget to update raw string values across the project. Keeping the action name strings near the store is a good solution. But still, this approach brings duplications as we have to maintain the action name in two places.

// stores/user-store.js
// imports...

export const USER_STORE = {
    ID: 'currentUser',
    ACTIONS: {
        SET_USER: 'setUser',
    },
};

const useUserStore = defineStore(USER_STORE.ID, {
    // state and getters
    actions: {
        setUser(value) {
            // ...
        } 
    },
});

export default useUserStore;

We could define store action like that:

actions: {
    [USER_STORE.ACTIONS.SET_USER](value) {
        // ...
    } 
},

but it would break the code completion in IDE and seems more like Vuex way.

So, I would be grateful to hear any feedback on that.

[posva]

it's already there: https://pinia.vuejs.org/api/interfaces/pinia._StoreOnActionListenerContext.html

[YehorPytomets]

@posva, I'll try to formulate it in another way.

We have to declare action names outside of the store in constants specifically for filtering in the $onAction callbacks to find the right action. Instead of doing that we could use the name of the action declared in the store object, but it is empty.

userStore.$onAction(({name, store}) => {
    console.log(store.setUser.name); // => '', but all JS functions typically have this property filled.
    if (name == 'setUser') { // we could use instead: store.setUser.name
        // ...   
    }
}

In Chrome:

It seems like a good feature for large projects that have dozens of $onAction() subscribers.

Would be grateful for your feedback.

[posva]

The name is already typesafe. There is no need to write something longer for no benefit