I have a Vue component like this:
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
props: ['index'],
computed: {
...mapGetters([
'type',
'width',
'height',
'description',
'smtTagMeasureUnits',
'tagValue'
])
}
</script>
<template>
<div :class='["block","module-"+type(index), "width"+width(index), "height"+height(index)]'>
<h3>{{ description(index) }}</h3>
<div class="data">
<h1>{{ tagValue(index) }}</h1>
<h2 class="measure">{{ smtTagMeasureUnits(index) }}</h2>
</div>
</div>
</template>
<style>
...
</style>
Parameter index, which comes into component as a prop, has been successfully passed to getters:
getters: {
...
type: (state, getters) => (par) => {
return getters.widgetsConfig[par].type
},
width: (state, getters) => (par) => {
if (getters.widgetsConfig[par].width) {
return getters.widgetsConfig[par].width
} return 2
},
height: (state, getters) => (par) => {
if (getters.widgetsConfig[par].height) {
return getters.widgetsConfig[par].height
} return 1
},
...
}
Works fine, but i'm not happy with this codestyle, because getterName(index)
constantly repeats in the template part. All of my getters should carry index as a prop, so i'd like to have just getterName
in the template and something like this in the script part:
...mapGetters([
'type',
'width',
'height',
'description',
'smtTagMeasureUnits',
'tagValue'
], index)
Is it possible to achieve any codestyle improvements here?