передать параметр геттерам в Vuex

Question

У меня есть такой компонент Vue:

<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>

Параметр index , который входит в компонент как prop , успешно передан получателям:

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
  },
  ...
}

Работает нормально, но меня не устраивает этот стиль кода, потому что getterName(index) постоянно повторяется в части шаблона. Все мои геттеры должны иметь index в качестве реквизита, поэтому я бы хотел, чтобы в шаблоне было просто getterName и что-то подобное в части скрипта:

...mapGetters([
'type',
'width',
'height',
'description',
'smtTagMeasureUnits',
'tagValue'
], index)

Можно ли добиться каких-либо улучшений стиля кода здесь?

Answer 1

Если вы хотите, чтобы все оставалось СУХИМЫМ, имело бы смысл использовать логику получения информации об элементе (сущности, которой соответствует index) в хранилище, поэтому компонент получает только полные данные, которые готовы к визуализации.

Предлагаемое решение состоит в том, чтобы создать один метод получения, который принимает index в качестве аргумента и возвращает полный список параметров из getters.widgetsConfig.

Обратите внимание, что при необходимости могут быть использованы другие методы получения.-используется для того, чтобы собрать необходимую информацию в один объект.

Возможная реализация:

getters: {
  ...
  getItemByIndex: (state, getters) => (index) => {
    const { type, height, width } = getters.widgetsConfig[index]
    return {
      type,
      height,
      width
    }
  },
}

И обновить компонент для сопоставления одного получателя и использовать его в вычисляемом свойстве:

computed: {
  ...mapGetters([
    'getItemByIndex'
  ]),
  item () {
    return this.getItemByIndex(index)
  }
}

И все свойства будут доступны внутри шаблона через item.type, item.height, item.width и т. Д.

Answer 2

Вы всегда можете создать вычисляемые свойства, которые возвращают результат получателей.Что-то вроде:

export default {
  props: ['index'],
  computed: {
    ...mapGetters([
      'getTypeFromIndex',
      'getWidthFromIndex',
      'getHeightFromIndex'
    ]),
    height(): { return this.getHeightFromIndex(index) },
    width(): { return this.getWidthFromIndex(index) },
    type(): { return this.getTypeFromIndex(index) },

    //going a step further to clean up your templates...
    classList: [
        "block", 
        "height"+this.height,
        "width"+this.width,
    ]
  }

Таким образом, вам просто нужно height в ваших шаблонах вместо height(index), или даже просто classList, если вы зайдете так далеко

Это такжессылка здесь: https://github.com/vuejs/vuex/issues/688 и я не могу найти его, но я знаю, что видел это, рекомендованное Эван Ю, также в выпуске github.