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>

作为 prop 组件的参数 index 已成功传递给getter：

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

您始终可以创建返回getter结果的计算属性。像这样：

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，我找不到它，但是我知道我也看到了Evan You在github问题中的推荐。

Answer 2

如果要使事物保持干燥，则有必要利用将商品（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等在模板内访问。

将参数传递给Vuex中的getter

2 个答案: