私は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)
_
ここでコードスタイルの改善を達成することは可能ですか?
物事を乾燥させておきたい場合は、アイテム(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
などを介してテンプレート内でアクセスできます。
ゲッターの結果を返す計算プロパティをいつでも作成できます。何かのようなもの:
_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が推奨するものを見たことがあることは知っています同様に問題。