【Vue.js】Composition APIで状態を整理して管理する方法｜setup関数の書き方と活用例

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++        // スクリプトの中では .value が必要
}
</script>

<template>
  <!-- テンプレートの中では、.value は不要（自動で取り出される） -->
  <p>カウント: {{ count }}</p>
  <button type="button" @click="increment">増やす</button>
</template>

<script>
import { ref } from 'vue'

// setup() 関数を使う書き方：テンプレートで使うものは、return で公開する
export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    return { count, increment }      // return し忘れると、テンプレートから見えない
  }
}
</script>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const object = { id: ref(1) }
const { id } = object          // トップレベルの変数に取り出す
</script>

<template>
  {{ count + 1 }}          <!-- OK：トップレベルの ref は展開される → 1 -->
  {{ object.id + 1 }}      <!-- NG：ネストした ref は展開されない → "[object Object]1" -->
  {{ id + 1 }}             <!-- OK：取り出した変数なら展開される → 2 -->
  {{ object.id }}          <!-- 最終的な値としての出力は展開される → 1 -->
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({ name: '', age: 0 })

function reset() {
  state.name = ''
  state.age = 0
}
</script>

import { reactive } from 'vue'

// 制限① オブジェクト型にしか使えない（文字列・数値・真偽値は持てない）

// 制限② 丸ごと置き換えると、リアクティブな接続が失われる
let state = reactive({ count: 0 })
state = reactive({ count: 1 })        // 最初のオブジェクトは、もう追跡されない

// 制限③ 分割代入や、関数への受け渡しで、接続が切れる
const s = reactive({ count: 0 })
let { count } = s
count++                                // s には反映されない
callSomeFunction(s.count)              // ただの数値が渡るので、変化を追えない

import { reactive, toRefs } from 'vue'

function useFeature() {
  const state = reactive({ foo: 1, bar: 2 })

  // ... state を使った処理 ...

  // 返すときに toRefs で ref のまとまりにすると、分割代入しても接続が切れない
  return toRefs(state)
}

const { foo, bar } = useFeature()
foo.value++              // もとの state.foo も更新される

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'

// ライフサイクルフックは、関数としてインポートして使う。
// setup の実行中に、同期的に呼んで登録する
onMounted(() => {
  console.log('マウントされました')
})

onBeforeUnmount(() => {
  console.log('破棄される直前です')
})
</script>

// useCounter.js：状態とロジックを、関数にまとめる
import { ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  return { count, increment }        // ref を返す（分割代入しても、リアクティブのまま）
}

<script setup>
import { useCounter } from './useCounter'

const { count, increment } = useCounter()
</script>