What naming do you use to avoid "stuttering" in Vuex modules?

Question

I've been having a hard time avoiding "stuttering" in Vuex modules. It just seems that most of the time, the module's name is also what it contains.

For example, suppose a module that handles users. I name the module file user.js

export default {
  state: {
    users: []
  },
  // mutations and actions for reading, creating, updating users...
}

Then in my store's index.js

import user from 'user';

export default new Vuex.Store({
  modules: {
    user
  }
});

When I want to get the list of users from a component I have to use:

this.$store.user.users

If I didn't use a module for the user list, I would just have had this.$store.users, which is much more readable and elegant.

Any idea for a naming convention or design pattern that would avoid this stutter?

Get creative. What's the purpose of having users? Likely, it's access control. So name the module `acl` (industry adopted acronym for Access Control List - a.k.a "user rights and permissions list"). Or you could rename your `users` to `admins` and `regulars`. Or name the lot `list`. All of that aside, your question has little to do with coding and is highly subjective (opinionated). What might seem like a good naming convention to me might not seem the same to you or others. Hence, it's off-topic here. — tao, May 05 '20 at 08:24
Maybe put some context on the final part of the name. e.g. `this.$store.user.all`, or if they aren't all users use a name that describes their significance. — skirtle, May 05 '20 at 08:26

score 0 · Answer 1 · answered May 05 '20 at 08:29

0

You could use mapState.

import { mapState } from 'vuex'


export default {
  // ...
  computed: mapState({
    users: state => state.user.users
  })
  // ...
}

Then you can use this.users as an alias to this.$store.user.users

answered May 05 '20 at 08:29

chilladx

Although it's a fairly decent solution, ***a)*** it doesn't really solve the problem (you still stutter in `mapState`) and ***b)*** it answers an off-topic question. Which, arguably, is not useful and creates clutter. Chances are the question will be closed as off-topic and removed from the site which, among others, will revert any rep gain you might have had here. In theory, you should avoid answering [off-topic](https://stackoverflow.com/help/closed-questions) questions and channel efforts into answering better questions, with higher chances of helping future users. Please read [answer]. – tao May 05 '20 at 08:34
Thanks, that's a helpful way to fix it. As @tao said, it doesn't completely avoid stuttering, but at least my components won't be littered with deeply nested accesses to the store modules. I'll take this for now. – LodeRunner May 05 '20 at 09:11
1

@LodeRunner mapState supports namespaces, see https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace . It's likely `mapState('user', ['users'])`. – Estus Flask May 05 '20 at 09:21
Actually, it can be even shorter: if `users` is the only state in your store named like that, it could be `...mapState(['users'])`. – chilladx May 05 '20 at 10:31

1 Answers1