検証目的

Vue3のComposablesは状態を持ったロジックを切り出せます。

composable内のStateはコンポーネント間で共有できるのか検証してみました。

注意

Vue3ではPiniaという便利な状態管理ライブラリがあります。
今回の趣旨は、あくまでcomposableのリアクティブについて理解を深めたい為動かしてみました。

検証結果

結論は、composableで定義したStateはコンポーネント間で共有できました。

しかし、一般的なcomposableの定義方法と異なる部分があったので紹介します。

複数のコンポーネントでcomposableを使用する

以下は、基本的なcomposableのコードです。

import { ref } from "vue";

export function useSample() {
  const isOpen = ref(false);

  const open = () => {
    isOpen.value = !isOpen.value;
  };

  return {
    isOpen,
    open,
  };
}

Component 1

isOpen: false

Component 2

isOpen: false

Component 1とComponent 2のisOpenはリアクティブとなっており、toggleボタンを押す値が変化します。 しかし、Component 1とComponent 2のisOpenは別々のStateとして管理されています。

Stateが共有されない理由は、コンポーネントごとにuseSample()を呼び出した時にisOpenは生成されている為と考えられます。

複数のコンポーネントでcomposableの値を共有する

以下は、Stateを共有する方法です。

さきほどのuseSampel()と異なる部分は、共有したいリアクティブ値をuseSample()のブロックの外で定義しています。

import { ref } from "vue";

const isOpen = ref(false);

export function useSample() {
  const open = () => {
    isOpen.value = !isOpen.value;
  };

  return {
    isOpen,
    open,
  };
}

Component 3

isOpen: false

Component 4

isOpen: false

useSample()のブロックの外で定義されているisOpenは、Component 3とComponent 4で共有されることが確認できます。

まとめ

Vue3のcomposableは異なるコンポーネント間で同時に使用する場合、リアクティブな値はどのような挙動になるか検証してみました。

一般的なcomposableをコンポーネントごと呼び出すと、別々のリアクティブな値として管理されます。

共有したいリアクティブ値をuseXXXX()の外で定義することで、値は共有可能でした。しかし、その場合はPiniaを検討しても良い気がしました。

参考

• コンポーサブル