web-dev-qa-db-ja.com

Vuexのゲッターにパラメーターを渡す

私は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)
_

ここでコードスタイルの改善を達成することは可能ですか？

javascriptvue.jsvuejs2vuex
7
KrasnokutskiyEA

物事を乾燥させておきたい場合は、アイテム（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などを介してテンプレート内でアクセスできます。

4
aBiscuit

ゲッターの結果を返す計算プロパティをいつでも作成できます。何かのようなもの：

_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(index)ではなくheightが必要になります。さらに、それだけの場合は、classListが必要になります。

これもここで参照されます： https://github.com/vuejs/vuex/issues/688 見つかりませんが、githubでEvan Youが推奨するものを見たことがあることは知っています同様に問題。

3
Jeff