firstbiz
@firstbiz

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

vue.js 兄弟コンポーネントにあるオブジェクトのメソッド呼び出しの手法

現状

vue.js を使っています。
主な処理はhogeという比較的大きなクラスで行っています。

「メイン」コンポーネントと「サイド」コンポーネントで構成されており、hogeは主にメインコンポーネントで使用します。

そのため「メイン」コンポーネントのmountedでhogeをインスタンス化して使っています。

意見が欲しいこと

「サイド」でhogeにあるメソッドを使いたい場面になりました。
この場合以下の解決方法がありますが、どれがよさそうでしょうか?
「ユニットテスト」の容易性の観点も必要になりそうです。

1.vuexでhogeを状態管理しておく。
 「サイド」はvuex経由でhogeを操作する。

store.hoge.test();

2.vuexで「メイン」コンポーネントを状態管理しておく。
 「サイド」では、vuex経由で「メイン」にあるメソッドを実行し、hogeを操作する。

store.main.test();

※main.testでは、hoge.test()を呼び出している。

3.vuexのmutationで「メイン」のメソッドを実行する。

store.test();

※store.test()では、main.test()を呼び出している。
※main.testでは、hoge.test()を呼び出している。

自分で試したこと

2の方法を試したのですが、JESTでユニットテストするにあたり、テストしずらいと感じました。
「store.hoge.test();」のような記述となり、モックの作り方に迷ったためです。

そこでまずは3の方法で実装してみました。

みなさんならどのようにhogeを操作しますでしょうか?

0

1Answer

  • 親のコンポーネントにhogeのインスタンスを持ってそれぞれのコンポーネントからイベントを発行する
  • Vuexのストアに処理を実装してそれぞれのコンポーネントからミューテーションをコミットする

などが一般的ではないでしょうか。
いずれにせよコンポーネントのメソッドを外部から呼び出す実装は避けたほうが良いと思います。

1Like

Comments

  1. @firstbiz

    Questioner

    なるほど。ありがとうございました!

Your answer might help someone💌