fluent API to access to actions/getters/state/mutations

[shredmaster]

What problem does this feature solve?

our team just adopted VueJS recently and I really don't like using the mapXXX helpers for a couple of reasons.

1. bad readability
2. magic strings are hard to maintain and refactor
3. can't navigate to the source in the IDE

I think it would be nice to access the module directly.

What does the proposed API look like?

const cart = {
  actions: {
    checkout ({ commit, state }, products) {
    }
  }
}

to dispatch checkout action, you can call the method directly.

$store.cart.actions.checkout(products)

I made a simple plugin vuex-help to access modules directly, but I think this would be a nice addition to the existing API.

[kiaking]

Thanks for the feedback! Yes, current API needs improvements. We're trying to address many issues regarding type safety as well in Vuex 5. And really nice job with vuex-help! I think it's going to inspire the Vuex 5 design 👍

[cerinoligutom]

@kiaking There's also direct-vuex which we use currently mainly due to the reasons mentioned above by OP. My only gripe about it is having to do the marked in red code in the screenshot below:

The actionContext and getterContext from getContexts() helps provide type safety to the whole store and that includes accessing a different namespaced module from another module.

The getContexts() helper:

And the root module:

Other than those, it really does the job well with great type safety even from within modules and I don't have to guess the fields in rootState and rootGetters. Though it'd be really great if this was native in Vuex. Looking forward to Vuex 5.

[clouds56]

I think expose makeLocalContext might help a lot.