Access Vuex getters, actions and mutation without string constants or mapping helpers

just publish my first vue plugin, alternative helpers to access getters, mutations, and actions without relying on string constants or mapping helpers.

check it out, feedbacks are welcome.


Access getters, actions, mutations and state using the modules object directly.


minimal example how to access actions and mutations without using mapXX helpers and magic string

export default {
  computed: {
    cart () {
      const { cartProducts: products, cartTotalPrice: total } = this.$h.cart.getters
      const { checkoutStatus } = this.$h.cart.state
      return {
  methods: {
    checkout (products) {
<div class="cart">
    <h2>Your Cart</h2>
    <p v-show="!cart.products.length"><i>Please add some products to cart.</i></p>
        v-for="product in cart.products"
        {{ product.title }} - {{ product.price | currency }} x {{ product.quantity }}
    <p>Total: {{ | currency }}</p>
    <p><button :disabled="!cart.products.length" @click="checkout(cart.products)">Checkout</button></p>
    <p v-show="cart.checkoutStatus">Checkout {{ cart.checkoutStatus }}.</p>

no clue what you just made here by the example given

thanks for the feedback. I’ve updated the documentation.
the motivation of this plugin is to access vuex API without relying on magic strings or mapXXX helpers. you can simply access the modules object directly.

here is simple example how to access action using the plugin

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

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


i think this is more natural than standard api below.

$store.dispatch('cart/checkout', products)