vuex-no-map
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:
;;; const store = // store options here; Vue;