vuex-no-map

1.0.11 • Public • Published

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 });

Package Sidebar

Install

npm i vuex-no-map

Weekly Downloads

1

Version

1.0.11

License

ISC

Unpacked Size

4.01 kB

Total Files

3

Last publish

Collaborators

  • p1pchenk0