Add constants types

[ShGKme]

It seems to me that constants types is important part of large stores.
This allows the code to take advantage of tooling like linters, IDE intellisence, refactoring tools etc.

https://vuex.vuejs.org/guide/mutations.html#using-constants-for-mutation-types

[igeligel]

This example is actually just focussing on the raw file structure in vuex stores, but yeah I should have used constants for mutation types.

If I will find the time I will extend the example to this but I am also happy to receive a PR if you want.

[ShGKme]

Vuex constants types in docs has the same problems as vuex project structure: examples in the docs are too simple and small (this is the reason why this repo exists).

1. Should only mutators has constants types or mutators has consts as well as getters and actions? (for all)
2. Where consts should be stored? In module file like "mutators.js"? In "index.js" of module (I would choose this)? In separeted files like "chat_types.js"? In one file for all modules (nope)?
3. Should mutators consts and action consts be separeted? In different files or in different objects like

const types = {
    mutators: {
        SET_STATE: 'SET_STATE'
    }
}

4. How to create consts?
   A large number of
   const SOME_CONST = 'SOME_CONST'
   Or in a object as bellow?
   Or using symbols?

I tried to found any articles like "vuex constants types using patterns", but found only articles about different generators and other useless articles.

I would be happy to create a PR. but after some agreements.

[igeligel]

Actually, I would like to have the variable names verbose following the https://chrisdone.com/posts/german-naming-convention/

File-wise I would not care but official docs say different files for mutations and actions. Personally, I would put them into one file like:

export const MUTATION_MESSAGES_UPDATED = "message_updated";
export const MUTATION_PRODUCTS_UPDATED = "products_updated";

export default {
  MUTATION_MESSAGES_UPDATED,
  MUTATION_PRODUCTS_UPDATED
};

You would import the named export like import { MUTATION_MESSAGES_UPDATED } from '...'; and this would even show in the variable name that this is a mutation.

Otherwise, I would like to rename it to be more consistent like:

MUTATION_MESSAGES_UPDATED ~> MUTATION_UPDATED_MESSAGES
MUTATION_PRODUCTS_UPDATED ~> MUTATION_UPDATED_PRODUCTS

In the end, you have something like:

export const MUTATION_UPDATED_MESSAGES = "message_updated";
export const MUTATION_UPDATED_PRODUCTS = "products_updated";

export default {
  MUTATION_UPDATED_MESSAGES,
  MUTATION_UPDATED_PRODUCTS
};

In what files this goes to is also a little bit unclear to me. But here it should go into the namespaced folder for sure.

[ShGKme]

In the docs there is an example only for mutations: Using Constants for Mutation Types.

I think, at least actions must have constants too. Even more, we call actions from components more often than mutators (if we use mutators in actions and actions in components for example). Mostly the same reasons: linting, intellisence etc... What do you think about it?

And question about namespaces. What about using createNamespacedHelpers?

[igeligel]

I think, at least actions must have constants too

Yes, everything could have a variable here. I agree. How to structure the file is different. In theory we could put everything in one file called vuex-constants.js and this would expose MUTATION, ACTION variables and so on. But we could also go with different files. But I would start first with one big file.

What about using createNamespacedHelpers?

Hmm, I am not sure about how to feel about this. It adds a lot of magic and domain knowledge about how Vuex works. I would rather keep it simple and maybe prefix the names on module base somehow.

[ShGKme]

Actually this is a very simple magic: https://github.com/vuejs/vuex/blob/dev/src/helpers.js#L117
Ok, let's do without createNamespacedHelpers (I must admit, I didn't remember this helper and found it after docs rereading today).

I'll make a PR this weekend ;)