/vuex-no-map

Vuex plugin, which allows to use store functionality without need to use vuex mappers in components

Primary LanguageJavaScript

vuex-no-map

npm npm

This plugin allows to omit using mapState, mapGetters, mapMutations, mapActions And thus reduce amount of code.

For example, instead of writing this code (consider having counter store module):

<template>
    <div>{{ count }}</div>
    <div>{{ getFormattedCount }}</div>
    <button @click="INCREMENT">+</button>
    <button @click="DECREMENT">-</button>
    <button @click="callApi">call</button>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
    name: 'TestComponent',
    computed: {
        ...mapState('counter', ['count']),
        ...mapGetters('counter', ['getFormattedCount'])
    },
    methods: {
        ...mapMutations('counter', ['INCREMENT', 'DECREMENT']),
        ...mapActions('counter', ['callApi'])
    }
}
</script>

We could write this:

<template>
    <div>{{ counter_count }}</div>
    <div>{{ counter_getFormattedCount }}</div>
    <button @click="counter_INCREMENT">+</button>
    <button @click="counter_DECREMENT">-</button>
    <button @click="counter_callApi">call</button>
</template>

<script>
export default {
    name: 'TestComponent'
}
</script>

Usage:

import Vue from 'vue';
import Vuex from 'vuex';
import VuexNoMap from 'vuex-no-map';

const store = new Vuex.Store({
    // store options here
});

Vue.use(VuexNoMap, { Vuex, store });