retlat's blog

Vue Composables のサンプルがモヤッとする

Vue Composition API の Composables を調べていたらドキュメントとか各種サイトで書かれているコードにモヤッとしたのでメモ

せっかくロジックをモジュールに切り出したのに、モジュールの外で state を書き換え可能な形で export しているコードをよく見かける
例えば以下のようなコードで

// sample.ts
import { ref } from 'vue'

export const useSample = () => {
  const count = ref(0)
  const increment = () => { count += 1 }

  return {
    count,
    increment
  }
}
<script lang="ts" setup>
import { useSample } from './sample'

const { count, increment } = useSample()

count.value = 100 // (1)
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button type="button" @click="increment">increment</button>
  </div>
</template>

(1) で書き換えができてしまう
変更用の関数を作成している意味がなくなってしまうし、これを検出するのが人力になってしまうのも辛い

computed を使えば型のレベルで再代入が不可になるので

import { computed, ref } from 'vue'

export const useSample = () => {
  const count = ref(0)
  const increment = () => { count += 1 }

  return {
    count: computed(() => count.value),
    increment
  }
}

こんな感じで書いた方が安全になる
パフォーマンスについては何も計測してないけど、書き換えできないと保証されることの方が自分にとっては大事なので、こっちで書いた方が良いと思うんだけどなぁ…

Post: 2022-04-10
Tags: Vue