hjeti / vue-skeleton

A Vue skeleton
MIT License
108 stars 21 forks source link

Suggestion: improve use of store constants #86

Open petervdn opened 5 years ago

petervdn commented 5 years ago

I think the latest change in the mutations/actions/getter constants has been very good (getting rid of the namespace), but i still think it can be improved upon. I have three suggestions, which is basically the system i have been using for quite a while and which not everyone seems to like, but i think we should at least implement the first one.

1. combine them into an object per store Each constant is now exported separately, which seems a bit weird since we don't do that anywhere else (it would be like exporting each RouteName entry separately). But more practically, if i have a bunch of stores with each a bunch of mutations (SET_USERNAME, SETSCORE), whenever i want to auto-fill/import something by typing "SET", i get a very big list of entries to choose from, and it will be not clear to what store they belong and what they do (since the constant typically doesn't contain the store name).

I think exporting those constants like this would be more practical:

export const appStore = {
    SET_DEVICE_STATE: `${namespace}/setDeviceState`,
}

In my opinion this is a lot easier to use. You just type that storename somewhere, autoimport it and the autocomplete lets you explore whatever values it has on it.

2. categorize constants per store I would go even further and group those values, since it's not always clear what a specific constant is (especially mutations and actions, their names can sometimes be a bit similar - although i think these two will be merged by vuex somewhere in the future).

export const appStore = {
    mutation: {
        SET_DEVICE_STATE: `${namespace}/setDeviceState`,
    },
    action: {
        LOGIN: `${namespace}/login`,
    }
}

I think using this in a component will make it very readable as well:

...mapActions({
    login: userStore.action.LOGIN,
});

3. automatically fill those values Regardless of whether we add the 2nd suggestion, i personally don't see why you wouldn't want to automatically set all those values instead of duplicating things, although this approach wasn't universally liked :)

export const appStore = initStoreConstants({
    mutation: {
        SET_DEVICE_STATE: null,
        SET_USERNAME: null,
    },
}, namespace);

(instead of the null values, this could also be done by what seng-event does with EVENT_TYPE_PLACEHOLDER)

Let me know what you think. Like i said, i think we should at least implement the first one to avoid the big list of options whenever you start typing SET_