🍑

データの整形は末端で行うようにしている

2021/07/22に公開

概要

mutation 処理で、親子コンポーネントでデータのやりとりをする時。

例えば、親コンポーネントの中に

XXX - XXXX

みたいな郵便番号の Input box が連なっている子コンポーネントがある時を考える。

郵便番号自体はサーバから XXX-XXXX と、一つのまとまりで送られてくる。

仮に郵便番号の Input box がハイフンつなぎでふたつあるとする。ふたつあるので、どこかでデータをふたつに整形するる必要がある。

さてさて fetch、 親、 子、どこで整形するのが正しいのだろうか?

fetch → 親コンポーネント → 子コンポーネント

( そして 子コンポーネント → 親コンポーネント → mutation と戻っていく)

良さそうな回答

結論は、 子コンポーネントで受け取ったときに整形する。そして、 emit で返すときにもとに戻す。

もしくは、fetch で受け取った時に整形する。そして mutation の前にもとに戻す。というのも悪く無い。悪くないが、実際にどんなデータが欲しいのか読みづらくなる可能性もあるので前者が良さそう。

私は初め、親コンポーネントでデータを変換して子に渡していたが、それはあまり良くないと教えを受けた。

という経験談。

Discussion