Vue 3のComposition APIを使った状態管理のコツ

Vue 3のComposition APIは、状態管理をより柔軟で効率的に行うための新しいアプローチを提供します。従来のOptions APIに比べて、コードの再利用性や可読性が向上し、特に大規模なアプリケーションにおいてその利点が顕著です。

本記事では、Composition APIを用いた状態管理の基本から応用までを解説し、具体的なサンプルコードを交えてわかりやすく説明します。

1. Composition APIの基本概念
2. 状態管理のためのComposable関数
3. 複数の状態を管理する
4. 状態管理のベストプラクティス
5. まとめ

1. Composition APIの基本概念

Composition APIは、Vue 3で導入された新しいAPIで、コンポーネントのロジックを関数としてまとめることができます。これにより、状態管理やライフサイクルフックをより直感的に扱うことが可能になります。

1.1. 基本的な使い方

Composition APIを使用するには、setup関数を定義します。この関数内で、状態やメソッドを定義し、コンポーネントで使用できるように返します。

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

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

この例では、refを使って反応性のあるcountを定義し、incrementメソッドでその値を増加させています。

2. 状態管理のためのComposable関数

状態管理を効率的に行うために、Composable関数を作成することができます。これにより、状態やロジックを再利用可能な形でまとめることができます。

2.1. Composable関数の作成

以下のように、カウンターの状態を管理するComposable関数を作成します。

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement,
  };
}

このuseCounter関数を使うことで、複数のコンポーネントで同じカウンターのロジックを簡単に再利用できます。

2.2. Composable関数の利用

次に、このComposable関数をコンポーネントで使用します。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

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

export default {
  setup() {
    const { count, increment, decrement } = useCounter();

    return {
      count,
      increment,
      decrement,
    };
  },
};
</script>

このように、useCounterをインポートして使用することで、カウンターの状態管理が簡単に行えます。

3. 複数の状態を管理する

アプリケーションが大きくなると、複数の状態を管理する必要があります。Composition APIを使うことで、これを効率的に行うことができます。

3.1. 複数のComposable関数

例えば、ユーザー情報とカート情報を管理するためのComposable関数を作成します。

// useUser.js
import { ref } from 'vue';

export function useUser() {
  const user = ref(null);

  const setUser = (newUser) => {
    user.value = newUser;
  };

  return {
    user,
    setUser,
  };
}

// useCart.js
import { ref } from 'vue';

export function useCart() {
  const cart = ref([]);

  const addToCart = (item) => {
    cart.value.push(item);
  };

  const removeFromCart = (item) => {
    cart.value = cart.value.filter(cartItem => cartItem.id !== item.id);
  };

  return {
    cart,
    addToCart,
    removeFromCart,
  };
}

3.2. 複数のComposable関数の利用

これらのComposable関数をコンポーネントで使用することで、ユーザー情報とカート情報を同時に管理できます。

<template>
  <div>
    <h1>User: {{ user?.name }}</h1>
    <button @click="setUser({ name: 'John Doe' })">Set User</button>
    <h2>Cart Items: {{ cart.length }}</h2>
    <button @click="addToCart({ id: 1, name: 'Product 1' })">Add to Cart</button>
  </div>
</template>

<script>
import { useUser } from './useUser';
import { useCart } from './useCart';

export default {
  setup() {
    const { user, setUser } = useUser();
    const { cart, addToCart } = useCart();

    return {
      user,
      setUser,
      cart,
      addToCart,
    };
  },
};
</script>