Auto-creating getters & actions

[evgeniyPP]

What problem does this feature solve?

A popular practice is to create getters for each value in the state, and actions for each mutation. This eliminates the confusion in the components. Now you can use only mapGetters for properties, and mapActions & dispatch for methods.

However, this makes the store very verbose. You need to create useless getters and actions that simply return a value from a state/commit a mutation.

It would be convenient if Vuex, in case it does not find a suitable getter, looked for a value in the state and returned it. Or, if it doesn’t find action with the given name, he finds a mutation with that name and commits it.

In this case, it would be possible to use only mapGetters and mapActions in the components and at the same time not to write extra code in the store.

I know that this is probably not solving a problem that cannot be easily dealt with using existing APIs. But IMHO that would be a great improvement to the user experience, and I wanted to share this idea with the development team.

What does the proposed API look like?

store.js

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count;
        }
    }
});

component.vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment"> </button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default ({
    computed: mapGetters(['count']),
    methods: mapActions(['increment'])
});
</script>

[kiaking]

Thanks for the proposal! I see your point, though I think this is a bit too complicated to be in the core functionality. Maybe it would be nice to have such a plugin though.

My opinion is that you could just use mapState and mapMutations in this case. There's nothing wrong with referencing state directly, or committing mutation without bypassing actions.

When you need getters and actions, it's time when you need to do more than just getting or setting the value.

I'll keep this issue open for a while to get some more feedback if we can. But as for now, I think this feature should be built as a plugin.

[amcsi]

I agree with @evgeniyPP's proposal almost.
I'm just not sure would not change the default functionality of mapGetters and mapActions for BC break reasons.
However the vuex team could create new functions that would do the things OP said. Or it could even be as a separate helper library.

In any case I would like to express a reason for why a tool like this would be great: It would go well with refactor-ability.
Think of Vue templates: you could be referencing variables that come from data() at first, but later you might decide that those variables should become computed properties instead. The great thing is that your template doesn't care what it is; in your JS code you just change the logic so your template variable would now be a computed property, and it just works and you don't have to change your template code.
Likewise when using mapXXX() methods it would be amazing if this tool would exist so you could grab the state or call mutations from your vuex module, but later could easily refactor your vuex module to use a new getter or action variant simply by adding a new getter/action definition with the same name as the state/mutation equivalent and not have to touch any of your Vue components' JS files.

And it's not just out of laziness that this would be great, but also because if someone doesn't use TypeScript, the IDE can't really help you find at what places you reference a state/mutation you would refactor, so you'd be at risk of "missing a spot" if you'd try to manually find every Vue component using that state/mutation.

[evgeniyPP]

amcsi, this is a great comment! I didn’t even think about it. I suggested the above because I wanted to make the code in the components cleaner. But your reason is even more important.

What is the first principle that any programmer is learning? DRY. Don't repeat yourself. Why? Because if you have to change something, you have to do it in a bunch of places, and the larger the application, the more difficult it is to make any change.

The fact that when changing the value from state to getter or vice versa / mutation to action or vice versa, we have to go through all the components and change them - this is an accurate definition of the DRY principle violation. And it would be nice if it was not there.

But how to do it with backward compatibility, whether to make a separate plugin or something else – I will leave this at the mercy of my more experienced comrades.

[evgeniyPP]

I started working on a separate package. Looks promising.

It would have been really great though to have it in the core, just as a couple of new helper functions.

I started with it. So far I have created a replacement only for mapState & mapGetters (called mapData). It took only about 50 lines in src/helpers.js.

[amcsi]

@evgeniyPP great, let me know when you create a public repo.

You could name the functions mapComputeds or mapMethods (or maybe mapForComputed()/mapForMethod()), because that's where the mapping goes to :)

[evgeniyPP]

The package is ready to use. Link to GitHub.

[kiaking]

Wonderful job with the package @evgeniyPP 🙌 Yeah I see the benefits from the comment from @amcsi as well. I could be handy. But, I think Vuex core should stay thin and less magical as possible, as Vuex is already a bit magical like you mentioned it deal with string base method call and such. People might get confused if things just get committed when it's not defined.

However, plugins like this will be very suitable for more advanced users and I have no negative comments on that 👍